From 8869271054e9b2c5a51b98d203802fd8031797bb Mon Sep 17 00:00:00 2001 From: Brian Sztamfater Date: Thu, 28 Sep 2023 12:27:36 -0300 Subject: [PATCH] feat: implement account list item component (#17303) Signed-off-by: Brian Sztamfater --- .../list_items/account/component_spec.cljs | 86 ++++++++++ .../components/list_items/account/style.cljs | 110 +++++++++++++ .../components/list_items/account/view.cljs | 155 ++++++++++++++++++ src/quo2/core.cljs | 2 + src/quo2/core_spec.cljs | 1 + .../quo_preview/list_items/account.cljs | 47 ++++++ src/status_im2/contexts/quo_preview/main.cljs | 128 ++++++++------- 7 files changed, 474 insertions(+), 55 deletions(-) create mode 100644 src/quo2/components/list_items/account/component_spec.cljs create mode 100644 src/quo2/components/list_items/account/style.cljs create mode 100644 src/quo2/components/list_items/account/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/list_items/account.cljs diff --git a/src/quo2/components/list_items/account/component_spec.cljs b/src/quo2/components/list_items/account/component_spec.cljs new file mode 100644 index 0000000000..5b872609e4 --- /dev/null +++ b/src/quo2/components/list_items/account/component_spec.cljs @@ -0,0 +1,86 @@ +(ns quo2.components.list-items.account.component-spec + (:require [test-helpers.component :as h] + [quo2.components.list-items.account.view :as account] + [quo2.foundations.colors :as colors])) + +(h/describe "List items: account" + (h/test "default render'" + (h/render [account/view]) + (h/is-truthy (h/query-by-label-text :container))) + + (h/test "on-press-in changes state to :pressed" + (h/render [account/view]) + (h/fire-event :on-press-in (h/get-by-label-text :container)) + (h/wait-for #(h/has-style (h/query-by-label-text :container) + {:backgroundColor (colors/custom-color :blue 50 5)}))) + + (h/test "on-press-in changes state to :pressed with blur? enabled" + (h/render [account/view {:blur? true}]) + (h/fire-event :on-press-in (h/get-by-label-text :container)) + (h/wait-for #(h/has-style (h/query-by-label-text :container) + {:backgroundColor colors/white-opa-5}))) + + (h/test "on-press-out changes state to :active" + (h/render [account/view]) + (h/fire-event :on-press-in (h/get-by-label-text :container)) + (h/fire-event :on-press-out (h/get-by-label-text :container)) + (h/wait-for #(h/has-style (h/query-by-label-text :container) + {:backgroundColor (colors/custom-color :blue 50 10)}))) + + (h/test "on-press-out changes state to :active with blur? enabled" + (h/render [account/view {:blur? true}]) + (h/fire-event :on-press-in (h/get-by-label-text :container)) + (h/fire-event :on-press-out (h/get-by-label-text :container)) + (h/wait-for #(h/has-style (h/query-by-label-text :container) + {:backgroundColor colors/white-opa-10}))) + + (h/test "on-press-out changes state to :selected" + (h/render [account/view {:selectable? true}]) + (h/fire-event :on-press-in (h/get-by-label-text :container)) + (h/fire-event :on-press-out (h/get-by-label-text :container)) + (h/wait-for #(h/is-truthy (h/query-by-label-text :check-icon)))) + + (h/test "on-press-out calls on-press" + (let [on-press (h/mock-fn)] + (h/render [account/view {:on-press on-press}]) + (h/fire-event :on-press-in (h/get-by-label-text :container)) + (h/fire-event :on-press-out (h/get-by-label-text :container)) + (h/was-called on-press))) + + (h/test "renders token props if type :tag" + (h/render [account/view {:type :tag}]) + (h/is-truthy (h/query-by-label-text :tag-container))) + + (h/test "renders keycard icon if title-icon? is true" + (h/render [account/view {:title-icon? true}]) + (h/is-truthy (h/query-by-label-text :keycard-icon))) + + (h/test "doesn't render keycard icon if title-icon? is false" + (h/render [account/view]) + (h/is-falsy (h/query-by-label-text :keycard-icon))) + + (h/test "renders balance container but not arrow icon if type :balance-neutral" + (h/render [account/view {:type :balance-neutral}]) + (h/is-truthy (h/query-by-label-text :balance-container)) + (h/is-falsy (h/query-by-label-text :arrow-icon))) + + (h/test "renders balance container and negative arrow icon if type :balance-negative" + (h/render [account/view {:type :balance-negative}]) + (h/is-truthy (h/query-by-label-text :balance-container)) + (h/is-truthy (h/query-by-label-text :icon-negative)) + (h/is-falsy (h/query-by-label-text :icon-positive))) + + (h/test "renders balance container and positive arrow icon if type :balance-positive" + (h/render [account/view {:type :balance-positive}]) + (h/is-truthy (h/query-by-label-text :balance-container)) + (h/is-falsy (h/query-by-label-text :icon-negative)) + (h/is-truthy (h/query-by-label-text :icon-positive))) + + (h/test "renders options button if type :action" + (let [on-options-press (h/mock-fn)] + (h/render [account/view + {:type :action + :on-options-press on-options-press}]) + (h/is-truthy (h/query-by-label-text :options-button)) + (h/fire-event :on-press (h/get-by-label-text :options-button)) + (h/was-called on-options-press)))) diff --git a/src/quo2/components/list_items/account/style.cljs b/src/quo2/components/list_items/account/style.cljs new file mode 100644 index 0000000000..4570147215 --- /dev/null +++ b/src/quo2/components/list_items/account/style.cljs @@ -0,0 +1,110 @@ +(ns quo2.components.list-items.account.style + (:require [quo2.foundations.colors :as colors])) + +(defn- background-color + [{:keys [state blur? customization-color]}] + (cond (or (= state :pressed) (= state :selected)) + (if blur? colors/white-opa-5 (colors/custom-color customization-color 50 5)) + (= state :active) + (if blur? colors/white-opa-10 (colors/custom-color customization-color 50 10)) + (and (= state :pressed) blur?) colors/white-opa-10 + :else :transparent)) + +(defn container + [props] + {:height 56 + :border-radius 12 + :background-color (background-color props) + :flex-direction :row + :align-items :center + :padding-horizontal 12 + :padding-vertical 6 + :justify-content :space-between}) + +(def left-container + {:flex-direction :row + :align-items :center}) + +(defn metric-text + [type theme] + {:color (case type + :balance-positive (colors/theme-colors colors/success-50 colors/success-60 theme) + :balance-negative (colors/theme-colors colors/danger-50 colors/danger-60 theme) + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}) + +(defn dot-divider + [type theme] + {:width 2 + :height 2 + :border-radius 2 + :margin-horizontal 4 + :background-color (case type + :balance-positive (colors/theme-colors colors/success-50-opa-40 + colors/success-60-opa-40 + theme) + :balance-negative (colors/theme-colors colors/danger-50-opa-40 + colors/danger-50-opa-40 + theme) + (colors/theme-colors colors/neutral-80-opa-40 colors/neutral-50-opa-40 theme))}) + +(defn arrow-icon + [type theme] + {:size 16 + :color (if (= type :balance-positive) + (colors/theme-colors colors/success-50 colors/success-60 theme) + (colors/theme-colors colors/danger-50 colors/danger-60 theme))}) + +(def arrow-icon-container + {:margin-left 4}) + +(def account-container + {:margin-left 8}) + +(def account-title-container + {:flex-direction :row + :height 22 + :align-items :center}) + +(defn account-address + [blur? theme] + {:height 18 + :color (if blur? + colors/white-opa-40 + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}) + +(def keycard-icon-container + {:margin-left 4}) + +(def token-tag-container + {:height 40 + :padding-top 4}) + +(defn token-tag-text-container + [blur? theme] + {:flex-direction :row + :align-items :center + :height 16 + :padding-horizontal 3 + :border-width 1 + :border-radius 6 + :border-color (if blur? + colors/white-opa-10 + (colors/theme-colors colors/neutral-20 + colors/neutral-80 + theme))}) + +(defn token-tag-text + [blur? theme] + {:margin-top -1 + :color (if blur? + colors/white-opa-70 + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}) + +(def balance-container + {:align-items :flex-end + :justify-content :space-between}) + +(def metrics-container + {:flex-direction :row + :align-items :center + :margin-top 2}) diff --git a/src/quo2/components/list_items/account/view.cljs b/src/quo2/components/list_items/account/view.cljs new file mode 100644 index 0000000000..fe69d826a5 --- /dev/null +++ b/src/quo2/components/list_items/account/view.cljs @@ -0,0 +1,155 @@ +(ns quo2.components.list-items.account.view + (:require [quo2.components.avatars.account-avatar.view :as account-avatar] + [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.style :as style] + [reagent.core :as reagent] + [quo2.components.icon :as icon])) + +(defn- account-view + [{:keys [account-props title-icon? blur? theme] + :or {title-icon? false}}] + [rn/view {:style style/left-container} + [account-avatar/view (assoc account-props :size 32)] + [rn/view {:style style/account-container} + [rn/view + {:style style/account-title-container} + [text/text + {:weight :semi-bold + :size :paragraph-1} + (:name account-props)] + (when title-icon? + [rn/view + {:style style/keycard-icon-container + :accessibility-label :keycard-icon} + [icon/icon :i/keycard + {:size 20 + :color (if blur? + colors/white-opa-40 + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])] + [text/text {:size :paragraph-2} + [text/text + {:size :paragraph-2 + :weight :monospace + :style (style/account-address blur? theme)} + (:address account-props)]]]]) + +(defn- balance-view + [{:keys [balance-props type theme]}] + [rn/view + {:style style/balance-container + :accessibility-label :balance-container} + [text/text + {:weight :medium + :size :paragraph-2} + (:fiat-value balance-props)] + [rn/view + {:style style/metrics-container} + [text/text + {:size :paragraph-2 + :style (style/metric-text type theme)} + (str (:percentage-change balance-props) "%")] + [rn/view {:style (style/dot-divider type theme)}] + [text/text + {:size :paragraph-2 + :style (style/metric-text type theme)} + (:fiat-change balance-props)] + (when (not= type :balance-neutral) + [rn/view + {:style style/arrow-icon-container + :accessibility-label :arrow-icon} + [icon/icon (if (= type :balance-positive) :i/positive :i/negative) + (assoc (style/arrow-icon type theme) + :accessibility-label + (if (= type :balance-positive) :icon-positive :icon-negative))]])]]) + +(defn- token-tag + [{:keys [token-props blur? theme]}] + ;; TODO: Use Tiny tag component when available (issue #17341) + [rn/view + {:style (style/token-tag-text-container blur? theme) + :accessibility-label :tag-container} + [text/text + {:size :label + :weight :medium + :style (style/token-tag-text blur? theme)} + (str (:value token-props) " " (:symbol token-props))]]) + +(defn- options-button + [{:keys [on-options-press blur? theme]}] + [rn/pressable + {:accessibility-label :options-button + :on-press #(when on-options-press + (on-options-press))} + [icon/icon :i/options + {:color (if blur? + colors/white-opa-70 + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]]) + +(defn- check-icon + [{:keys [blur? customization-color theme]}] + [rn/view {:accessibility-label :check-icon} + [icon/icon :i/check + {:color (if blur? + colors/white + (colors/theme-colors (colors/custom-color customization-color 50) + (colors/custom-color customization-color 60) + theme))}]]) + +(defn- f-internal-view + [] + (let [state (reagent/atom :default) + active-or-selected? (atom false) + timer (atom nil) + on-press-in (fn [] + (when-not (= @state :selected) + (reset! timer (js/setTimeout #(reset! state :pressed) 100))))] + (fn [{:keys [type selectable? blur? customization-color on-press] + :or {customization-color :blue + type :default + blur? false} + :as props}] + (let [on-press-out (fn [] + (let [new-state (if @active-or-selected? + :default + (if (and (= type :default) selectable?) + :selected + :active))] + (when @timer (js/clearTimeout @timer)) + (reset! timer nil) + (reset! active-or-selected? (or (= new-state :active) + (= new-state :selected))) + (reset! state new-state) + (when on-press + (on-press))))] + (rn/use-effect + #(cond (and selectable? (= type :default) (= @state :active)) (reset! state :selected) + (and (not selectable?) (= type :default) (= @state :selected)) (reset! state :active)) + [selectable?]) + [rn/pressable + {:style (style/container + {:state @state :blur? blur? :customization-color customization-color}) + :on-press-in on-press-in + :on-press-out on-press-out + :accessibility-label :container} + [account-view props] + [rn/view {:style (when (= type :tag) style/token-tag-container)} + (when (or (= type :balance-neutral) + (= type :balance-negative) + (= type :balance-positive)) + [balance-view props]) + (when (= type :tag) + [token-tag props]) + (when (= type :action) + [options-button props]) + (when (and (= type :default) + (= @state :selected)) + [check-icon props])]])))) + +(defn- internal-view + [props] + [:f> f-internal-view props]) + +(def view (quo.theme/with-theme internal-view)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index e8ba7ffc75..f6707fdb38 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -64,6 +64,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.view quo2.components.list-items.account-list-card.view quo2.components.list-items.channel.view quo2.components.list-items.community.view @@ -255,6 +256,7 @@ (def url-preview-list quo2.components.links.url-preview-list.view/view) ;;;; List items +(def account-item quo2.components.list-items.account.view/view) (def account-list-card quo2.components.list-items.account-list-card.view/view) (def channel quo2.components.list-items.channel.view/view) (def dapp quo2.components.list-items.dapp.view/view) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index e88d05c716..9c32cbb147 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -37,6 +37,7 @@ [quo2.components.links.link-preview.component-spec] [quo2.components.links.url-preview-list.component-spec] [quo2.components.links.url-preview.component-spec] + [quo2.components.list-items.account.component-spec] [quo2.components.list-items.channel.component-spec] [quo2.components.list-items.community.component-spec] [quo2.components.list-items.dapp.component-spec] diff --git a/src/status_im2/contexts/quo_preview/list_items/account.cljs b/src/status_im2/contexts/quo_preview/list_items/account.cljs new file mode 100644 index 0000000000..c85fc9a7ae --- /dev/null +++ b/src/status_im2/contexts/quo_preview/list_items/account.cljs @@ -0,0 +1,47 @@ +(ns status-im2.contexts.quo-preview.list-items.account + (:require [quo2.core :as quo] + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def descriptor + [{:key :type + :type :select + :options [{:key :default} {:key :balance-positive} {:key :balance-neutral} {:key :balance-negative} + {:key :tag} {:key :action}]} + {:key :selectable? :type :boolean} + {:key :title-icon? :type :boolean} + {:key :emoji + :type :text} + (preview/customization-color-option {:key :account-color}) + {:key :blur? :type :boolean} + (preview/customization-color-option)]) + +(defn view + [] + (let [state (reagent/atom {:type :default + :selectable? false + :title-icon? false + :customization-color :blue + :account-color :purple + :emoji "🍑" + :title "New House" + :address "0x21a...49e" + :balance-props {:crypto-value "0.00" + :fiat-value "€0.00" + :percentage-change "0.0" + :fiat-change "€0.00"} + :token-props {:symbol "SNT" + :value "1,000"} + :on-options-press #(js/alert "Options button pressed!")})] + (fn [] [preview/preview-container + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? true + :blur-dark-only? true} + [quo/account-item + (merge @state + {:account-props {:name (:title @state) + :address (:address @state) + :emoji (:emoji @state) + :customization-color (:account-color @state)}})]]))) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 3139708119..98999471c9 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -6,20 +6,24 @@ [react-native.core :as rn] [status-im2.contexts.quo-preview.style :as style] [status-im2.contexts.quo-preview.common :as common] - [status-im2.contexts.quo-preview.animated-header-list.animated-header-list :as animated-header-list] + [status-im2.contexts.quo-preview.animated-header-list.animated-header-list + :as animated-header-list] [status-im2.contexts.quo-preview.avatars.account-avatar :as account-avatar] [status-im2.contexts.quo-preview.avatars.channel-avatar :as channel-avatar] [status-im2.contexts.quo-preview.avatars.group-avatar :as group-avatar] [status-im2.contexts.quo-preview.avatars.icon-avatar :as icon-avatar] [status-im2.contexts.quo-preview.avatars.user-avatar :as user-avatar] [status-im2.contexts.quo-preview.selectors.reactions :as selector-reactions] - [status-im2.contexts.quo-preview.avatars.wallet-user-avatar :as wallet-user-avatar] + [status-im2.contexts.quo-preview.avatars.wallet-user-avatar :as + wallet-user-avatar] [status-im2.contexts.quo-preview.banners.banner :as banner] [status-im2.contexts.quo-preview.buttons.button :as button] - [status-im2.contexts.quo-preview.buttons.composer-button :as composer-button] + [status-im2.contexts.quo-preview.buttons.composer-button :as + composer-button] [status-im2.contexts.quo-preview.buttons.slide-button :as slide-button] [status-im2.contexts.quo-preview.buttons.dynamic-button :as dynamic-button] - [status-im2.contexts.quo-preview.buttons.predictive-keyboard :as predictive-keyboard] + [status-im2.contexts.quo-preview.buttons.predictive-keyboard :as + predictive-keyboard] [status-im2.contexts.quo-preview.buttons.wallet-button :as wallet-button] [status-im2.contexts.quo-preview.buttons.wallet-ctas :as wallet-ctas] [status-im2.contexts.quo-preview.calendar.calendar :as calendar] @@ -28,13 +32,15 @@ [status-im2.contexts.quo-preview.browser.browser-input :as browser-input] [status-im2.contexts.quo-preview.code.snippet :as code-snippet] [status-im2.contexts.quo-preview.code.snippet-preview :as code-snippet-preview] - [status-im2.contexts.quo-preview.graph.interactive-graph :as interactive-graph] - [status-im2.contexts.quo-preview.graph.wallet-graph :as wallet-graph] - [status-im2.contexts.quo-preview.colors.color-picker :as color-picker] [status-im2.contexts.quo-preview.colors.color :as color] - [status-im2.contexts.quo-preview.community.community-card-view :as community-card] - [status-im2.contexts.quo-preview.community.community-membership-list-view :as - community-membership-list-view] + [status-im2.contexts.quo-preview.colors.color-picker :as color-picker] + [status-im2.contexts.quo-preview.graph.interactive-graph :as + interactive-graph] + [status-im2.contexts.quo-preview.graph.wallet-graph :as wallet-graph] + [status-im2.contexts.quo-preview.community.community-card-view :as + community-card] + [status-im2.contexts.quo-preview.community.community-membership-list-view + :as community-membership-list-view] [status-im2.contexts.quo-preview.community.discover-card :as discover-card] [status-im2.contexts.quo-preview.community.token-gating :as token-gating] [status-im2.contexts.quo-preview.counter.counter :as counter] @@ -43,51 +49,69 @@ [status-im2.contexts.quo-preview.dividers.divider-label :as divider-label] [status-im2.contexts.quo-preview.dividers.divider-line :as divider-line] [status-im2.contexts.quo-preview.dividers.new-messages :as new-messages] - [status-im2.contexts.quo-preview.dividers.strength-divider :as strength-divider] + [status-im2.contexts.quo-preview.dividers.strength-divider :as + strength-divider] [status-im2.contexts.quo-preview.drawers.action-drawers :as action-drawers] - [status-im2.contexts.quo-preview.drawers.documentation-drawers :as documentation-drawers] + [status-im2.contexts.quo-preview.drawers.documentation-drawers :as + documentation-drawers] [status-im2.contexts.quo-preview.drawers.drawer-buttons :as drawer-buttons] [status-im2.contexts.quo-preview.drawers.drawer-top :as drawer-top] - [status-im2.contexts.quo-preview.drawers.permission-drawers :as permission-drawers] + [status-im2.contexts.quo-preview.drawers.permission-drawers :as + permission-drawers] [status-im2.contexts.quo-preview.dropdowns.dropdown :as dropdown] - [status-im2.contexts.quo-preview.dropdowns.network-dropdown :as network-dropdown] + [status-im2.contexts.quo-preview.dropdowns.network-dropdown :as + network-dropdown] [status-im2.contexts.quo-preview.foundations.shadows :as shadows] [status-im2.contexts.quo-preview.info.info-message :as info-message] [status-im2.contexts.quo-preview.info.information-box :as information-box] [status-im2.contexts.quo-preview.inputs.input :as input] [status-im2.contexts.quo-preview.inputs.address-input :as address-input] [status-im2.contexts.quo-preview.inputs.locked-input :as locked-input] - [status-im2.contexts.quo-preview.inputs.recovery-phrase-input :as recovery-phrase-input] + [status-im2.contexts.quo-preview.inputs.recovery-phrase-input :as + recovery-phrase-input] [status-im2.contexts.quo-preview.inputs.profile-input :as profile-input] [status-im2.contexts.quo-preview.inputs.search-input :as search-input] [status-im2.contexts.quo-preview.inputs.title-input :as title-input] - [status-im2.contexts.quo-preview.numbered-keyboard.keyboard-key :as keyboard-key] - [status-im2.contexts.quo-preview.numbered-keyboard.numbered-keyboard :as numbered-keyboard] + [status-im2.contexts.quo-preview.numbered-keyboard.keyboard-key :as + keyboard-key] + [status-im2.contexts.quo-preview.numbered-keyboard.numbered-keyboard :as + numbered-keyboard] [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.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.account :as + account-item] + [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.dapp :as dapp] [status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists] [status-im2.contexts.quo-preview.list-items.saved-address :as saved-address] [status-im2.contexts.quo-preview.list-items.token-value :as token-value] [status-im2.contexts.quo-preview.list-items.user-list :as user-list] - [status-im2.contexts.quo-preview.list-items.community-list :as community-list] + [status-im2.contexts.quo-preview.list-items.community-list :as + community-list] [status-im2.contexts.quo-preview.markdown.text :as text] [status-im2.contexts.quo-preview.markdown.list :as markdown-list] [status-im2.contexts.quo-preview.messages.author :as messages-author] [status-im2.contexts.quo-preview.messages.gap :as messages-gap] [status-im2.contexts.quo-preview.messages.system-message :as system-message] - [status-im2.contexts.quo-preview.navigation.bottom-nav-tab :as bottom-nav-tab] - [status-im2.contexts.quo-preview.navigation.floating-shell-button :as floating-shell-button] + [status-im2.contexts.quo-preview.navigation.bottom-nav-tab :as + bottom-nav-tab] + [status-im2.contexts.quo-preview.navigation.floating-shell-button :as + floating-shell-button] [status-im2.contexts.quo-preview.navigation.page-nav :as page-nav] [status-im2.contexts.quo-preview.navigation.top-nav :as top-nav] - [status-im2.contexts.quo-preview.notifications.activity-logs :as activity-logs] - [status-im2.contexts.quo-preview.notifications.activity-logs-photos :as activity-logs-photos] - [status-im2.contexts.quo-preview.notifications.notification :as notification] + [status-im2.contexts.quo-preview.notifications.activity-logs :as + activity-logs] + [status-im2.contexts.quo-preview.notifications.activity-logs-photos :as + activity-logs-photos] + [status-im2.contexts.quo-preview.notifications.notification :as + notification] [status-im2.contexts.quo-preview.notifications.toast :as toast] - [status-im2.contexts.quo-preview.onboarding.small-option-card :as small-option-card] + [status-im2.contexts.quo-preview.onboarding.small-option-card :as + small-option-card] [status-im2.contexts.quo-preview.password.tips :as tips] [status-im2.contexts.quo-preview.profile.collectible :as collectible] [status-im2.contexts.quo-preview.profile.profile-card :as profile-card] @@ -119,14 +143,17 @@ [status-im2.contexts.quo-preview.tags.status-tags :as status-tags] [status-im2.contexts.quo-preview.tags.tags :as tags] [status-im2.contexts.quo-preview.tags.token-tag :as token-tag] - [status-im2.contexts.quo-preview.text-combinations.preview :as text-combinations] + [status-im2.contexts.quo-preview.text-combinations.preview :as + text-combinations] [status-im2.contexts.quo-preview.keycard.keycard :as keycard] [status-im2.contexts.quo-preview.loaders.skeleton-list :as skeleton-list] - [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions] + [status-im2.contexts.quo-preview.community.channel-actions :as + channel-actions] [status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover] [status-im2.contexts.quo-preview.wallet.account-card :as account-card] [status-im2.contexts.quo-preview.wallet.account-origin :as account-origin] - [status-im2.contexts.quo-preview.wallet.account-overview :as account-overview] + [status-im2.contexts.quo-preview.wallet.account-overview :as + account-overview] [status-im2.contexts.quo-preview.wallet.keypair :as keypair] [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount] [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge] @@ -135,7 +162,8 @@ [status-im2.contexts.quo-preview.wallet.summary-info :as summary-info] [status-im2.contexts.quo-preview.wallet.token-input :as token-input] [status-im2.contexts.quo-preview.wallet.wallet-activity :as wallet-activity] - [status-im2.contexts.quo-preview.wallet.transaction-summary :as transaction-summary] + [status-im2.contexts.quo-preview.wallet.transaction-summary :as + transaction-summary] [status-im2.contexts.quo-preview.wallet.wallet-overview :as wallet-overview] [utils.re-frame :as rf])) @@ -269,7 +297,9 @@ {:name :link-preview :options {:insets {:top? true}} :component link-preview/view}] - :list-items [{:name :account-list-card + :list-items [{:name :account + :component account-item/view} + {:name :account-list-card :component account-list-card/view} {:name :channel :component channel/view} @@ -382,34 +412,22 @@ :component token-tag/preview-token-tag}] :text-combinations [{:name :text-combinations :component text-combinations/preview}] - :wallet [{:name :account-card - :component account-card/preview-account-card} - {:name :account-origin - :component account-origin/view} + :wallet [{:name :account-card :component account-card/preview-account-card} + {:name :account-origin :component account-origin/view} {:name :account-overview :component account-overview/preview-account-overview} - {:name :keypair - :component keypair/preview} - {:name :network-amount - :component network-amount/preview} - {:name :network-bridge - :component network-bridge/preview} - {:name :network-link - :component network-link/preview} - {:name :progress-bar - :component progress-bar/preview} - {:name :summary-info - :component summary-info/preview} - {:name :token-input - :component token-input/preview} - {:name :wallet-activity - :component wallet-activity/view} - {:name :transaction-summary - :component transaction-summary/view} + {:name :keypair :component keypair/preview} + {:name :network-amount :component network-amount/preview} + {:name :network-bridge :component network-bridge/preview} + {:name :network-link :component network-link/preview} + {:name :progress-bar :component progress-bar/preview} + {:name :summary-info :component summary-info/preview} + {:name :token-input :component token-input/preview} + {:name :wallet-activity :component wallet-activity/view} + {:name :transaction-summary :component transaction-summary/view} {:name :wallet-overview :component wallet-overview/preview-wallet-overview}] - :keycard [{:name :keycard-component - :component keycard/view}]}) + :keycard [{:name :keycard-component :component keycard/view}]}) (defn- category-view []