Account avatar component (#13700)

src/quo2/components/avatars/account_avatar.cljs

@@ -0,0 +1,45 @@
+(ns quo2.components.avatars.account-avatar
+  (:require [quo.react-native :as rn]
+            [quo2.foundations.colors :as colors]
+            [status-im.ui.components.icons.icons :as icons]
+            [quo.theme :as theme]))
+
+(def icon-color-value
+  {:dark (get-in colors/customization [:dark :purple])
+   :light (get-in colors/customization [:light :purple])})
+
+(defn get-border-radius [size]
+  (case size
+    80 16
+    48 12
+    32 10
+    24 8
+    20 6))
+
+(defn get-inner-icon-sizes [size]
+  (case size
+    80 36
+    48 24
+    32 15
+    24 11
+    20 11))
+
+(defn account-avatar
+  [{:keys [size icon]
+    :or   {size 80
+           icon :main-icons/placeholder}}]
+  (let [icon-color           (if (theme/dark?)
+                               (:dark icon-color-value)
+                               (:light icon-color-value))
+        avatar-border-radius (get-border-radius size)
+        inner-icon-size      (get-inner-icon-sizes size)]
+    [rn/view {:style {:width            size
+                      :background-color icon-color
+                      :height           size
+                      :border-radius    avatar-border-radius
+                      :justify-content  :center
+                      :align-items      :center}}
+     [icons/icon icon
+      {:no-color        true
+       :container-style {:width  inner-icon-size
+                         :height inner-icon-size}}]]))

src/quo2/screens/avatars/account_avatar.cljs

@@ -0,0 +1,48 @@
+(ns quo2.screens.avatars.account-avatar
+  (:require [reagent.core :as reagent]
+            [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
+            [quo.design-system.colors :as colors]
+            [quo2.components.avatars.account-avatar :as quo2]))
+
+(def descriptor [{:label   "Icon"
+                  :key     :icon
+                  :type    :select
+                  :options [{:key   :main-icons/wallet
+                             :value "Wallet"}
+                            {:key   :main-icons/token
+                             :value "Token"}
+                            {:key   :main-icons/status
+                             :value "Status"}]}
+                 {:label   "Size"
+                  :key     :size
+                  :type    :select
+                  :options [{:key   20
+                             :value "Small"}
+                            {:key   24
+                             :value "Medium"}
+                            {:key   32
+                             :value "Big"}
+                            {:key   48
+                             :value "Very big"}
+                            {:key   80
+                             :value "Seriously Big!"}]}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:size 80
+                             :icon :main-icons/wallet})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [preview/customizer state descriptor]
+       [rn/view {:padding-vertical 60
+                 :align-items      :center}
+        [quo2/account-avatar @state]]])))
+
+(defn preview-account-avatar []
+  [rn/view {:background-color (:preview-background @colors/theme)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])

src/quo2/screens/main.cljs

@@ -48,6 +48,7 @@
             [quo2.screens.wallet.network-breakdown :as network-breakdown]
             [quo2.screens.wallet.network-amount :as network-amount]
             [quo2.screens.navigation.page-nav :as page-nav]
+            [quo2.screens.avatars.account-avatar :as account-avatar]
             [re-frame.core :as re-frame]))
 
 (def screens-categories
@@ -65,7 +66,10 @@
              :component wallet-user-avatar/preview-wallet-user-avatar}
             {:name      :channel-avatar
              :insets    {:top false}
-             :component channel-avatar/preview-channel-avatar}]
+             :component channel-avatar/preview-channel-avatar}
+            {:name      :account-avatar
+             :insets    {:top false}
+             :component account-avatar/preview-account-avatar}]
    :buttons [{:name      :button
               :insets    {:top false}
               :component button/preview-button}