Quo2 Wallet: Account list card (#16893)

* Quo2: account-list-card

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

@@ -0,0 +1,21 @@
+(ns quo2.components.list-items.account-list-card.component-spec
+  (:require
+    [test-helpers.component :as h]
+    [quo2.components.list-items.account-list-card.view :as account-list-card]))
+
+(def account-props
+  {:customization-color :purple
+   :size                32
+   :emoji               "🍑"
+   :type                :default
+   :name                "Tip to Vegas"
+   :address             "0x0ah...78b"})
+
+(h/describe "List items: account list card"
+  (h/test "Test icon renders for ':action :icon'"
+    (h/render [account-list-card/view
+               {:account-props account-props
+                :network       :ethereum
+                :state         :default
+                :action        :icon}])
+    (h/is-truthy (h/get-by-label-text :icon))))

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

@@ -0,0 +1,20 @@
+(ns quo2.components.list-items.account-list-card.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn container
+  [state theme]
+  (let [light-bg     (if (= state :default) colors/neutral-2_5 colors/neutral-5)
+        dark-bg      (if (= state :default) colors/neutral-80-opa-40 colors/neutral-80-opa-60)
+        light-border (if (= state :default) colors/neutral-10 colors/neutral-20)
+        dark-border  (if (= state :default) colors/neutral-80 colors/neutral-70)]
+    {:width              319
+     :height             48
+     :border-radius      12
+     :background-color   (colors/theme-colors light-bg dark-bg theme)
+     :border-width       1
+     :border-color       (colors/theme-colors light-border dark-border theme)
+     :flex-direction     :row
+     :align-items        :center
+     :padding-horizontal 8
+     :padding-vertical   6
+     :justify-content    :space-between}))

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

@@ -0,0 +1,42 @@
+(ns quo2.components.list-items.account-list-card.view
+  (:require
+    [quo2.components.avatars.account-avatar.view :as account-avatar]
+    [quo2.components.icon :as icon]
+    [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.account-list-card.style :as style]))
+
+(defn- internal-view
+  [{:keys [theme account-props networks state action on-press]}]
+  [rn/view
+   {:style               (style/container state theme)
+    :accessibility-label :container}
+   [rn/view
+    {:style {:flex-direction :row
+             :align-items    :center}}
+    [account-avatar/view account-props]
+    [rn/view {:style {:margin-left 8}}
+     [text/text
+      {:weight :semi-bold
+       :size   :paragraph-2}
+      (:name account-props)]
+     [text/text {:size :paragraph-2}
+      (map (fn [network]
+             ^{:key (str network)}
+             [text/text
+              {:size  :paragraph-2
+               :style {:color (get colors/networks network)}} (str (subs (name network) 0 3) ":")])
+           networks)
+      [text/text
+       {:size  :paragraph-2
+        :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+       (:address account-props)]]]]
+   (when (= action :icon)
+     [rn/pressable {:on-press on-press}
+      [icon/icon :i/options
+       {:color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+        :accessibility-label :icon}]])])
+
+(def view (quo.theme/with-theme internal-view))

src/quo2/core.cljs

@@ -55,6 +55,7 @@
     quo2.components.links.link-preview.view
     quo2.components.links.url-preview-list.view
     quo2.components.links.url-preview.view
+    quo2.components.list-items.account-list-card.view
     quo2.components.list-items.channel
     quo2.components.list-items.community.view
     quo2.components.list-items.menu-item
@@ -224,6 +225,7 @@
 (def url-preview-list quo2.components.links.url-preview-list.view/view)
 
 ;;;; List items
+(def account-list-card quo2.components.list-items.account-list-card.view/view)
 (def channel-list-item quo2.components.list-items.channel/list-item)
 (def menu-item quo2.components.list-items.menu-item/menu-item)
 (def preview-list quo2.components.list-items.preview-list/preview-list)

src/quo2/foundations/colors.cljs

@@ -44,7 +44,7 @@
 
 ;;Solid
 
-
+(def neutral-2_5 "#FAFBFC")
 (def neutral-5 "#F5F6F8")
 (def neutral-10 "#F0F2F5")
 (def neutral-20 "#E7EAEE")

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

@@ -0,0 +1,42 @@
+(ns status-im2.contexts.quo-preview.list-items.account-list-card
+  (:require
+    [quo2.core :as quo]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label   "State:"
+    :key     :state
+    :type    :select
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :pressed
+               :value "Pressed"}]}
+   {:label   "Action:"
+    :key     :action
+    :type    :select
+    :options [{:key   :none
+               :value "None"}
+              {:key   :icon
+               :value "Icon"}]}])
+
+(defn preview
+  []
+  (let [state (reagent/atom {:account-props {:customization-color :purple
+                                             :size                32
+                                             :emoji               "🍑"
+                                             :type                :default
+                                             :name                "Trip to Vegas"
+                                             :address             "0x0ah...78b"}
+                             :networks      [:ethereum :optimism]
+                             :state         :default
+                             :action        :none
+                             :on-press      (fn [] (js/alert "Button pressed"))})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view
+        {:style {:flex               1
+                 :padding-horizontal 20}}
+        [rn/view {:style {:min-height 150}} [preview/customizer state descriptor]]
+        [quo/account-list-card @state]]])))

src/status_im2/contexts/quo_preview/main.cljs

@@ -57,6 +57,7 @@
     [status-im2.contexts.quo-preview.links.url-preview :as url-preview]
     [status-im2.contexts.quo-preview.links.url-preview-list :as url-preview-list]
     [status-im2.contexts.quo-preview.links.link-preview :as link-preview]
+    [status-im2.contexts.quo-preview.list-items.account-list-card :as account-list-card]
     [status-im2.contexts.quo-preview.list-items.channel :as channel]
     [status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
     [status-im2.contexts.quo-preview.list-items.user-list :as user-list]
@@ -281,7 +282,10 @@
                         :options   {:insets {:top? true}
                                     :topBar {:visible true}}
                         :component link-preview/preview}]
-   :list-items        [{:name      :channel
+   :list-items        [{:name      :account-list-card
+                        :options   {:topBar {:visible true}}
+                        :component account-list-card/preview}
+                       {:name      :channel
                         :options   {:topBar {:visible true}}
                         :component channel/preview-channel}
                        {:name      :community-list