From 961150ac30e5923e2c68a5d7da34f921c2df2be7 Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Mon, 14 Aug 2023 17:00:42 +0400 Subject: [PATCH] Quo2 Wallet: Account list card (#16893) * Quo2: account-list-card --- .../account_list_card/component_spec.cljs | 21 ++++++++++ .../list_items/account_list_card/style.cljs | 20 +++++++++ .../list_items/account_list_card/view.cljs | 42 +++++++++++++++++++ src/quo2/core.cljs | 2 + src/quo2/foundations/colors.cljs | 2 +- .../list_items/account_list_card.cljs | 42 +++++++++++++++++++ src/status_im2/contexts/quo_preview/main.cljs | 6 ++- 7 files changed, 133 insertions(+), 2 deletions(-) create mode 100644 src/quo2/components/list_items/account_list_card/component_spec.cljs create mode 100644 src/quo2/components/list_items/account_list_card/style.cljs create mode 100644 src/quo2/components/list_items/account_list_card/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs diff --git a/src/quo2/components/list_items/account_list_card/component_spec.cljs b/src/quo2/components/list_items/account_list_card/component_spec.cljs new file mode 100644 index 0000000000..8e39813b7f --- /dev/null +++ b/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)))) diff --git a/src/quo2/components/list_items/account_list_card/style.cljs b/src/quo2/components/list_items/account_list_card/style.cljs new file mode 100644 index 0000000000..f05ba83e50 --- /dev/null +++ b/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})) diff --git a/src/quo2/components/list_items/account_list_card/view.cljs b/src/quo2/components/list_items/account_list_card/view.cljs new file mode 100644 index 0000000000..278f1bc19e --- /dev/null +++ b/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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index c20d95cdfa..7cd375b84b 100644 --- a/src/quo2/core.cljs +++ b/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) diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index bf96c3eea3..c0f93599b1 100644 --- a/src/quo2/foundations/colors.cljs +++ b/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") diff --git a/src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs b/src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs new file mode 100644 index 0000000000..ebc09bcb41 --- /dev/null +++ b/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]]]))) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 6620a7ff6e..a664e743fd 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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