Implement wallet user avatar to match designs (#17703)

src/quo/components/avatars/wallet_user_avatar.cljs

@@ -1,68 +0,0 @@
-(ns quo.components.avatars.wallet-user-avatar
-  (:require
-    [clojure.string :as string]
-    [quo.components.markdown.text :as text]
-    [quo.foundations.colors :as colors]
-    [quo.theme :as quo.theme]
-    [react-native.core :as rn]))
-
-(def circle-sizes
-  {:small   20
-   :medium  32
-   :large   48
-   :size-64 64
-   :x-large 80})
-
-(def font-sizes
-  {:small   :label
-   :medium  :paragraph-2
-   :large   :paragraph-1
-   :size-64 :heading-1
-   :x-large :heading-1})
-
-(def font-weights
-  {:small   :medium
-   :medium  :semi-bold
-   :large   :semi-bold
-   :size-64 :medium
-   :x-large :medium})
-
-(defn- view-internal
-  "params, first name, last name, customization-color, size
-   and if it's dark or not!"
-  [{:keys [f-name l-name customization-color size theme monospace? uppercase?]
-    :or   {f-name     "John"
-           l-name     "Doe"
-           size       :x-large
-           uppercase? true}}]
-  (let [circle-size    (size circle-sizes)
-        small?         (= size :small)
-        f-name-initial (-> f-name
-                           (#(if uppercase? (string/upper-case %) %))
-                           (subs 0 1))
-        l-name-initial (-> l-name
-                           (#(if uppercase? (string/upper-case %) %))
-                           (subs 0 1))
-        circle-color   (if customization-color
-                         (colors/resolve-color customization-color theme 20)
-                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))
-        text-color     (if customization-color
-                         (colors/resolve-color customization-color theme)
-                         (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme))]
-    [rn/view
-     {:style {:width            circle-size
-              :height           circle-size
-              :border-radius    circle-size
-              :text-align       :center
-              :justify-content  :center
-              :align-items      :center
-              :background-color circle-color}}
-     [text/text
-      {:size   (size font-sizes)
-       :weight (if monospace? :monospace (size font-weights))
-       :style  {:color text-color}}
-      (if small?
-        (str f-name-initial)
-        (str f-name-initial l-name-initial))]]))
-
-(def wallet-user-avatar (quo.theme/with-theme view-internal))

src/quo/components/avatars/wallet_user_avatar/component_spec.cljs

@@ -0,0 +1,16 @@
+(ns quo.components.avatars.wallet-user-avatar.component-spec
+  (:require [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
+            [test-helpers.component :as h]))
+
+(h/describe "wallet user avatar"
+  (h/describe "View internal"
+    (h/test "Renders by default even with no input parameters"
+      (h/render
+       [wallet-user-avatar/wallet-user-avatar {}])
+      (h/is-truthy (h/query-by-label-text :wallet-user-avatar)))
+
+    (h/test "Renders user’s initials when full name is provided"
+      (h/render
+       [wallet-user-avatar/wallet-user-avatar {:full-name "Jane Smith"}])
+      (h/is-truthy (h/get-by-text "JS")))))
+

src/quo/components/avatars/wallet_user_avatar/style.cljs

@@ -0,0 +1,27 @@
+(ns quo.components.avatars.wallet-user-avatar.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn- circle-color
+  [customization-color]
+  (colors/custom-color customization-color 50 20))
+
+(defn- text-color
+  [customization-color theme]
+  (colors/theme-colors
+   (colors/custom-color customization-color 50)
+   (colors/custom-color customization-color 60)
+   theme))
+
+(defn container
+  [circle-size customization-color]
+  {:width            circle-size
+   :height           circle-size
+   :border-radius    circle-size
+   :text-align       :center
+   :justify-content  :center
+   :align-items      :center
+   :background-color (circle-color customization-color)})
+
+(defn text
+  [customization-color theme]
+  {:color (text-color customization-color theme)})

src/quo/components/avatars/wallet_user_avatar/view.cljs

@@ -0,0 +1,57 @@
+(ns quo.components.avatars.wallet-user-avatar.view
+  (:require [quo.components.avatars.wallet-user-avatar.style :as style]
+            [quo.components.markdown.text :as text]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]
+            utils.string))
+
+(def properties
+  {:size-20 {:size        20
+             :font-size   :label
+             :font-weight :medium}
+   :size-24 {:size        24
+             :font-size   :label
+             :font-weight :semi-bold}
+   :size-32 {:size        32
+             :font-size   :paragraph-2
+             :font-weight :semi-bold}
+   :size-48 {:size        48
+             :font-size   :paragraph-1
+             :font-weight :semi-bold}
+   :size-64 {:size        64
+             :font-size   :paragraph-1
+             :font-weight :medium}
+   :size-80 {:size        80
+             :font-size   :heading-1
+             :font-weight :medium}})
+
+(def smallest-possible (first (keys properties)))
+(def second-smallest-possible (second (keys properties)))
+(defn check-if-size-small
+  [size]
+  (or (= size smallest-possible)
+      (= size second-smallest-possible)))
+(def biggest-possible (last (keys properties)))
+
+(defn- view-internal
+  "Options:
+
+  :full-name - string (default: nil) - used to generate initials
+  :customization-color  - keyword (default: nil) - color of the avatar
+  :size   - keyword (default: last element of properties object) - size of the
+  avatar
+  :monospace? - boolean (default: false) - use monospace font"
+  [{:keys [full-name customization-color size theme monospace?]
+    :or   {size biggest-possible}}]
+  (let [circle-size (:size (size properties))
+        small?      (check-if-size-small size)]
+    [rn/view
+     {:style (style/container circle-size customization-color)}
+     [text/text
+      {:accessibility-label :wallet-user-avatar
+       :size                (:font-size (size properties))
+       :weight              (if monospace? :monospace (:font-weight (size properties)))
+       :style               (style/text customization-color theme)}
+      (utils.string/get-initials full-name (if small? 1 2))]]))
+
+(def wallet-user-avatar (quo.theme/with-theme view-internal))

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

@@ -1,7 +1,7 @@
 (ns quo.components.list-items.address.view
   (:require
     [clojure.string :as string]
-    [quo.components.avatars.wallet-user-avatar :as wallet-user-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
     [quo.components.list-items.address.style :as style]
     [quo.components.markdown.text :as text]
     [quo.foundations.colors :as colors]

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

@@ -1,7 +1,7 @@
 (ns quo.components.list-items.saved-address.view
   (:require
     [clojure.string :as string]
-    [quo.components.avatars.wallet-user-avatar :as wallet-user-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
     [quo.components.icon :as icon]
     [quo.components.list-items.saved-address.style :as style]
     [quo.components.markdown.text :as text]

src/quo/components/share/qr_code/view.cljs

@@ -3,7 +3,7 @@
     [quo.components.avatars.account-avatar.view :as account-avatar]
     [quo.components.avatars.channel-avatar.view :as channel-avatar]
     [quo.components.avatars.user-avatar.view :as user-avatar]
-    [quo.components.avatars.wallet-user-avatar :as wallet-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-avatar]
     [quo.components.share.qr-code.style :as style]
     [react-native.core :as rn]
     [react-native.fast-image :as fast-image]))

src/quo/core.cljs

@@ -7,7 +7,7 @@
     quo.components.avatars.group-avatar.view
     quo.components.avatars.icon-avatar
     quo.components.avatars.user-avatar.view
-    quo.components.avatars.wallet-user-avatar
+    quo.components.avatars.wallet-user-avatar.view
     quo.components.banners.banner.view
     quo.components.browser.browser-input.view
     quo.components.buttons.button.view
@@ -159,7 +159,7 @@
 (def group-avatar quo.components.avatars.group-avatar.view/view)
 (def icon-avatar quo.components.avatars.icon-avatar/icon-avatar)
 (def user-avatar quo.components.avatars.user-avatar.view/user-avatar)
-(def wallet-user-avatar quo.components.avatars.wallet-user-avatar/wallet-user-avatar)
+(def wallet-user-avatar quo.components.avatars.wallet-user-avatar.view/wallet-user-avatar)
 
 ;;;; Banner
 (def banner quo.components.banners.banner.view/view)

src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs

@@ -5,28 +5,23 @@
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "First name"
+  [{:key  :full-name
-    :key   :f-name
+    :type :text}
-    :type  :text}
-   {:label "Last name"
-    :key   :l-name
-    :type  :text}
    {:key     :size
     :type    :select
-    :options [{:key :small}
+    :options [{:key :size-20}
-              {:key :medium}
+              {:key :size-24}
-              {:key :large}
+              {:key :size-32}
+              {:key :size-48}
               {:key :size-64}
-              {:key   :x-large
+              {:key :size-80}]}
-               :value "X Large"}]}
+   (preview/customization-color-option)])
-   (preview/customization-color-option {:key :customization-color})])
 
 (defn view
   []
-  (let [state (reagent/atom {:first-name          "empty"
+  (let [state (reagent/atom {:full-name           "empty name"
-                             :last-name           "name"
+                             :size                :size-80
-                             :size                :x-large
+                             :customization-color :blue})]
-                             :customization-color :indigo})]
     (fn []
       [preview/preview-container {:state state :descriptor descriptor}
        [quo/wallet-user-avatar @state]])))