UI Component - Account (#14643)

* Implement accounts component

src/quo2/components/avatars/account_avatar.cljs

@@ -1,13 +1,8 @@
 (ns quo2.components.avatars.account-avatar
   (:require [quo2.components.icon :as icons]
             [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
             [react-native.core :as rn]))
 
-(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
@@ -27,12 +22,11 @@
     20 11))
 
 (defn account-avatar
-  [{:keys [size icon]
+  [{:keys [size icon color]
     :or   {size  80
-           icon :main-icons/placeholder}}]
+           icon  :i/placeholder
-  (let [icon-color           (if (theme/dark?)
+           color :purple}}]
-                               (:dark icon-color-value)
+  (let [icon-color           (colors/custom-color-by-theme color 50 60)
-                               (:light icon-color-value))
         avatar-border-radius (get-border-radius size)
         inner-icon-size      (get-inner-icon-sizes size)]
     [rn/view

src/quo2/components/settings/accounts/style.cljs

@@ -0,0 +1,71 @@
+(ns quo2.components.settings.accounts.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def card
+  {:position      :relative
+   :padding       8
+   :border-radius 16
+   :height        160
+   :width         160})
+
+(defn background-top
+  [custom-color]
+  {:position                :absolute
+   :top                     0
+   :border-top-left-radius  16
+   :border-top-right-radius 16
+   :width                   160
+   :height                  64
+   :background-color        (-> colors/customization
+                                (get-in [custom-color 50])
+                                (colors/alpha 0.2))})
+
+(defn background-bottom
+  []
+  {:position         :absolute
+   :top              40
+   :border-radius    16
+   :width            160
+   :height           120
+   :background-color (colors/theme-colors
+                      colors/white
+                      colors/neutral-90)})
+
+(defn avatar-border
+  []
+  {:margin          2
+   :justify-content :center
+   :align-items     :center
+   :width           52
+   :height          52
+   :border-radius   14
+   :border-width    2
+   :border-color    (colors/theme-colors
+                     colors/white
+                     colors/neutral-90)})
+
+(def menu-button-container
+  {:justify-content :center
+   :align-items     :center
+   :align-self      :flex-start})
+(defn menu-button-color
+  []
+  {:background-color (colors/theme-colors
+                      colors/white-opa-40
+                      colors/neutral-80-opa-40)})
+
+(defn address-text
+  []
+  {:color (colors/theme-colors
+           colors/neutral-50
+           colors/neutral-40)})
+
+(def card-top
+  {:flex-direction  :row
+   :align-items     :center
+   :justify-content :space-between})
+
+(def card-bottom
+  {:flex              1
+   :margin-horizontal 4
+   :margin-top        4})

src/quo2/components/settings/accounts/view.cljs

@@ -0,0 +1,46 @@
+(ns quo2.components.settings.accounts.view
+  (:require [quo2.components.avatars.account-avatar :as account-avatar]
+            [quo2.components.buttons.button :as button]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.settings.accounts.style :as style]
+            [react-native.core :as rn]))
+
+(defn card-background
+  [{:keys [custom-color]}]
+  [:<>
+   [rn/view {:style (style/background-top custom-color)}]
+   [rn/view {:style (style/background-bottom)}]])
+
+(defn avatar
+  [avatar-props]
+  [rn/view {:style (style/avatar-border)}
+   [account-avatar/account-avatar (assoc avatar-props :size 48)]])
+
+(defn menu-button
+  [{:keys [on-press]}]
+  [rn/view {:style style/menu-button-container}
+   [button/button
+    {:style    (style/menu-button-color)
+     :type     :gray
+     :icon     true
+     :size     24
+     :on-press on-press}
+    :i/more]])
+
+(defn account
+  [{:keys [account-name account-address avatar-icon custom-color on-press-menu]}]
+  [rn/view {:style style/card}
+   [card-background {:custom-color custom-color}]
+   [rn/view {:style style/card-top}
+    [avatar
+     {:color custom-color
+      :icon  avatar-icon}]
+    [menu-button {:on-press on-press-menu}]]
+   [rn/view {:style style/card-bottom}
+    [text/text {:size :paragraph-1 :weight :semi-bold}
+     account-name]
+    [text/text
+     {:style  (style/address-text)
+      :size   :paragraph-2
+      :weight :medium}
+     account-address]]])

src/quo2/core.cljs

@@ -46,6 +46,7 @@
    quo2.components.selectors.filter.view
    quo2.components.selectors.selectors
    quo2.components.separator
+   quo2.components.settings.accounts.view
    quo2.components.settings.privacy-option
    quo2.components.tabs.account-selector
    quo2.components.tabs.tabs
@@ -128,3 +129,4 @@
 
 ;;;; SETTINGS
 (def privacy-option quo2.components.settings.privacy-option/card)
+(def account quo2.components.settings.accounts.view/account)

src/status_im2/contexts/quo_preview/main.cljs

@@ -63,6 +63,7 @@
    [status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price]
    [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
    [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
+   [status-im2.contexts.quo-preview.settings.accounts :as accounts]
    [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]))
 
 (def screens-categories
@@ -194,7 +195,10 @@
                             :component selectors/preview-selectors}]
    :settings              [{:name      :privacy-option
                             :insets    {:top false}
-                            :component privacy-option/preview-options}]
+                            :component privacy-option/preview-options}
+                           {:name      :accounts
+                            :insets    {:top false}
+                            :component accounts/preview-accounts}]
    :tabs                  [{:name      :segmented
                             :insets    {:top false}
                             :component segmented/preview-segmented}

src/status_im2/contexts/quo_preview/settings/accounts.cljs

@@ -0,0 +1,51 @@
+(ns status-im2.contexts.quo-preview.settings.accounts
+  (:require [clojure.string :as string]
+            [quo2.components.settings.accounts.view :as quo]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label   "Custom color"
+    :key     :custom-color
+    :type    :select
+    :options (map (fn [[k _]]
+                    {:key k :value (string/capitalize (name k))})
+                  colors/customization)}
+   {:label "Account name"
+    :key   :account-name
+    :type  :text}
+   {:label "Account address"
+    :key   :account-address
+    :type  :text}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:custom-color    :blue
+                             :account-name    "Booze for Dubai"
+                             :account-address "0x21a ... 49e"
+                             :avatar-icon     :i/placeholder
+                             :on-press-menu   (fn []
+                                                (js/alert "Menu button pressed"))})]
+    (fn []
+      [rn/view
+       {:margin-bottom 50
+        :padding       16}
+       [preview/customizer state descriptor]
+       [rn/view
+        {:padding-vertical 100
+         :align-items      :center
+         :background-color (colors/theme-colors
+                            colors/neutral-30
+                            colors/neutral-95)}
+        [quo/account @state]]])))
+
+(defn preview-accounts
+  []
+  [rn/view {:style {:flex 1}}
+   [rn/flat-list
+    {:flex                      1
+     :keyboardShouldPersistTaps :always
+     :header                    [cool-preview]
+     :key-fn                    str}]])