From 7754460acc2e6689bf14e4f9ea20c7abc4f924b3 Mon Sep 17 00:00:00 2001 From: Volodymyr Kozieiev Date: Fri, 1 Mar 2024 21:03:35 +0000 Subject: [PATCH] Malli schemas added to components (#18949) --- .../drawers/drawer_top/component_spec.cljs | 2 +- .../list_items/account/component_spec.cljs | 63 ++++++++++++++----- .../components/list_items/account/schema.cljs | 50 +++++++++++++++ .../components/list_items/account/view.cljs | 8 ++- .../account_list_card/component_spec.cljs | 10 +-- .../list_items/account_list_card/schema.cljs | 30 +++++++++ .../list_items/account_list_card/view.cljs | 8 ++- .../list_items/address/component_spec.cljs | 16 +++-- .../components/list_items/address/schema.cljs | 14 +++++ .../components/list_items/address/view.cljs | 7 ++- .../saved_contact_address/component_spec.cljs | 35 +++++++---- .../saved_contact_address/schema.cljs | 29 +++++++++ .../saved_contact_address/view.cljs | 6 +- .../token_network/component_spec.cljs | 20 +++--- .../list_items/token_network/schema.cljs | 16 +++++ .../list_items/token_network/view.cljs | 8 ++- .../token_value/component_spec.cljs | 44 ++++++------- .../list_items/token_value/schema.cljs | 23 +++++++ .../list_items/token_value/view.cljs | 8 ++- .../wallet/address_text/schema.cljs | 2 +- .../components/wallet/address_text/view.cljs | 3 +- .../wallet/keypair/component_spec.cljs | 5 +- src/quo/components/wallet/keypair/view.cljs | 6 +- .../preview/quo/drawers/drawer_top.cljs | 2 +- .../preview/quo/gradient/gradient_cover.cljs | 4 +- .../preview/quo/list_items/account.cljs | 17 +++-- .../quo/list_items/account_list_card.cljs | 4 +- .../preview/quo/list_items/address.cljs | 4 +- .../contexts/preview/quo/wallet/keypair.cljs | 20 +++--- .../wallet/home/tabs/assets/view.cljs | 6 +- 30 files changed, 357 insertions(+), 113 deletions(-) create mode 100644 src/quo/components/list_items/account/schema.cljs create mode 100644 src/quo/components/list_items/account_list_card/schema.cljs create mode 100644 src/quo/components/list_items/address/schema.cljs create mode 100644 src/quo/components/list_items/saved_contact_address/schema.cljs create mode 100644 src/quo/components/list_items/token_network/schema.cljs create mode 100644 src/quo/components/list_items/token_value/schema.cljs diff --git a/src/quo/components/drawers/drawer_top/component_spec.cljs b/src/quo/components/drawers/drawer_top/component_spec.cljs index 45637cb6ca..fcd057a4fb 100644 --- a/src/quo/components/drawers/drawer_top/component_spec.cljs +++ b/src/quo/components/drawers/drawer_top/component_spec.cljs @@ -65,7 +65,7 @@ {:title "Title" :type :account :account-avatar-emoji "🍿" - :networks [{:name :ethereum :short-name "eth"}] + :networks [{:network-name :ethereum :short-name "eth"}] :description "0x62b...0a5" :customization-color :purple}] theme) diff --git a/src/quo/components/list_items/account/component_spec.cljs b/src/quo/components/list_items/account/component_spec.cljs index 9623d6ecd6..50697914a1 100644 --- a/src/quo/components/list_items/account/component_spec.cljs +++ b/src/quo/components/list_items/account/component_spec.cljs @@ -6,71 +6,101 @@ (def ^:private theme :light) +(def ^:private default-props + {:account-props {:name "Account name" + :address "0x1234567890" + :emoji "🍑" + :customization-color "blue"}}) + +(defn- with-defaults + ([] default-props) + ([props] (merge default-props props))) + (h/describe "List items: account" (h/test "default render'" - (h/render-with-theme-provider [account/view] theme) + (h/render-with-theme-provider [account/view (with-defaults)] theme) (h/is-truthy (h/query-by-label-text :container))) (h/test "on-press-in changes state to :pressed" - (h/render-with-theme-provider [account/view] theme) + (h/render-with-theme-provider [account/view (with-defaults)] theme) (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/resolve-color :blue :light 5)}))) (h/test "on-press-in changes state to :pressed with blur? enabled" - (h/render-with-theme-provider [account/view {:blur? true}] theme) + (h/render-with-theme-provider [account/view (with-defaults {:blur? true})] theme) (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 "render with state :active" - (h/render-with-theme-provider [account/view {:state :active}] theme) + (h/render-with-theme-provider [account/view (with-defaults {:state :active})] theme) (h/has-style (h/query-by-label-text :container) {:backgroundColor (colors/resolve-color :blue :light 10)})) (h/test "render with state :active and blur? enabled" (h/render-with-theme-provider [account/view - {:blur? true - :state :active}] + (with-defaults + {:blur? true + :state :active})] theme) (h/has-style (h/query-by-label-text :container) {:backgroundColor colors/white-opa-10})) (h/test "render with state :selected" - (h/render-with-theme-provider [account/view {:state :selected}] theme) + (h/render-with-theme-provider [account/view (with-defaults {:state :selected})] theme) (h/is-truthy (h/query-by-label-text :check-icon))) (h/test "calls on-press" (let [on-press (h/mock-fn)] - (h/render-with-theme-provider [account/view {:on-press on-press}] theme) + (h/render-with-theme-provider [account/view (with-defaults {:on-press on-press})] theme) (h/fire-event :on-press (h/get-by-label-text :container)) (h/was-called on-press))) (h/test "renders token props if type :tag" - (h/render-with-theme-provider [account/view {:type :tag}] theme) + (h/render-with-theme-provider [account/view + (with-defaults {:type :tag + :token-props {:symbol "SNT" + :value "1,000"}})] + theme) (h/is-truthy (h/query-by-label-text :tag-container))) (h/test "renders keycard icon if title-icon is present" - (h/render-with-theme-provider [account/view {:title-icon :i/placeholder}] theme) + (h/render-with-theme-provider [account/view (with-defaults {:title-icon :i/placeholder})] theme) (h/is-truthy (h/query-by-label-text :title-icon))) (h/test "doesn't render keycard icon if title-icon is missing" - (h/render-with-theme-provider [account/view] theme) + (h/render-with-theme-provider [account/view (with-defaults)] theme) (h/is-falsy (h/query-by-label-text :title-icon))) (h/test "renders balance container but not arrow icon if type :balance-neutral" - (h/render-with-theme-provider [account/view {:type :balance-neutral}] theme) + (h/render-with-theme-provider [account/view + (with-defaults {:type :balance-neutral + :balance-props {:fiat-value "€0.00" + :percentage-change "0.0" + :fiat-change "€0.00"}})] + theme) (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-with-theme-provider [account/view {:type :balance-negative}] theme) + (h/render-with-theme-provider [account/view + (with-defaults {:type :balance-negative + :balance-props {:fiat-value "€0.00" + :percentage-change "0.0" + :fiat-change "€0.00"}})] + theme) (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-with-theme-provider [account/view {:type :balance-positive}] theme) + (h/render-with-theme-provider [account/view + (with-defaults {:type :balance-positive + :balance-props {:fiat-value "€0.00" + :percentage-change "0.0" + :fiat-change "€0.00"}})] + theme) (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))) @@ -78,8 +108,9 @@ (h/test "renders options button if type :action" (let [on-options-press (h/mock-fn)] (h/render-with-theme-provider [account/view - {:type :action - :on-options-press on-options-press}] + (with-defaults + {:type :action + :on-options-press on-options-press})] theme) (h/is-truthy (h/query-by-label-text :options-button)) (h/fire-event :on-press (h/get-by-label-text :options-button)) diff --git a/src/quo/components/list_items/account/schema.cljs b/src/quo/components/list_items/account/schema.cljs new file mode 100644 index 0000000000..041517c4ac --- /dev/null +++ b/src/quo/components/list_items/account/schema.cljs @@ -0,0 +1,50 @@ +(ns quo.components.list-items.account.schema) + +(def ^:private ?balance + [:map + [:balance-props + [:map + [:fiat-value :string] + [:percentage-change :string] + [:fiat-change :string]]]]) + +(def ^:private ?tag + [:map + [:token-props + [:map + [:symbol :string] + [:value :string]]]]) + +(def ^:private ?action + [:map + [:on-options-press {:optional true} [:maybe fn?]]]) + +(def ^:private ?base + [:map + [:type {:optional true} + [:enum :default :tag :action :balance-neutral :balance-negative :balance-positive]] + [:state {:optional true} [:enum :default :selected :active]] + [:blur? {:optional true} [:maybe :boolean]] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]] + [:on-press {:optional true} [:maybe fn?]] + [:theme :schema.common/theme] + [:title-icon {:optional true} [:maybe :keyword]] + [:account-props + [:map + [:name :string] + [:address :string] + [:emoji :string] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]]]]]) + +(def ?schema + [:=> + [:cat + [:multi {:dispatch :type} + [:balance-neutral [:merge ?base ?balance]] + [:balance-negative [:merge ?base ?balance]] + [:balance-positive [:merge ?base ?balance]] + [:tag [:merge ?base ?tag]] + [:action [:merge ?base ?action]] + [:default ?base] + [:malli.core/default ?base]]] + :any]) diff --git a/src/quo/components/list_items/account/view.cljs b/src/quo/components/list_items/account/view.cljs index 11cca25188..b57aa39cd3 100644 --- a/src/quo/components/list_items/account/view.cljs +++ b/src/quo/components/list_items/account/view.cljs @@ -2,13 +2,15 @@ (:require [quo.components.avatars.account-avatar.view :as account-avatar] [quo.components.icon :as icon] + [quo.components.list-items.account.schema :as component-schema] [quo.components.list-items.account.style :as style] [quo.components.markdown.text :as text] [quo.components.wallet.address-text.view :as address-text] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [schema.core :as schema])) (defn- account-view [{:keys [account-props title-icon blur? theme]}] @@ -130,4 +132,6 @@ (and (= type :default) (= state :selected)) [check-icon props])]]))) -(def view (quo.theme/with-theme internal-view)) +(def view + (quo.theme/with-theme + (schema/instrument #'internal-view component-schema/?schema))) diff --git a/src/quo/components/list_items/account_list_card/component_spec.cljs b/src/quo/components/list_items/account_list_card/component_spec.cljs index 7c6a3f882a..561d08487b 100644 --- a/src/quo/components/list_items/account_list_card/component_spec.cljs +++ b/src/quo/components/list_items/account_list_card/component_spec.cljs @@ -13,9 +13,9 @@ (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/render-with-theme-provider [account-list-card/view + {:account-props account-props + :network :ethereum + :action :icon + :on-options-press (fn [])}]) (h/is-truthy (h/get-by-label-text :icon)))) diff --git a/src/quo/components/list_items/account_list_card/schema.cljs b/src/quo/components/list_items/account_list_card/schema.cljs new file mode 100644 index 0000000000..24b5520ddd --- /dev/null +++ b/src/quo/components/list_items/account_list_card/schema.cljs @@ -0,0 +1,30 @@ +(ns quo.components.list-items.account-list-card.schema) + +(def ^:private ?base + [:map + [:action {:optional true} [:enum :icon :none]] + [:blur? {:optional true} [:maybe :boolean]] + [:on-press {:optional true} [:maybe fn?]] + [:theme :schema.common/theme] + [:account-props + [:map {:closed true} + [:type [:enum :default :watch-only]] + [:name :string] + [:address :string] + [:emoji :string] + [:size {:optional true} [:enum 80 :size-64 48 32 28 24 20 16]] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]]]] + [:networks {:optional true} [:* [:map [:network-name :keyword] [:short-name :string]]]]]) + +(def ^:private ?on-option-press + [:map + [:on-options-press [:maybe fn?]]]) + +(def ?schema + [:=> + [:cat + [:multi {:dispatch :action} + [:icon [:merge ?base ?on-option-press]] + [:none ?base] + [:malli.core/default ?base]]] + :any]) diff --git a/src/quo/components/list_items/account_list_card/view.cljs b/src/quo/components/list_items/account_list_card/view.cljs index e782bda0a1..99b4988ac2 100644 --- a/src/quo/components/list_items/account_list_card/view.cljs +++ b/src/quo/components/list_items/account_list_card/view.cljs @@ -2,13 +2,15 @@ (:require [quo.components.avatars.account-avatar.view :as account-avatar] [quo.components.icon :as icon] + [quo.components.list-items.account-list-card.schema :as component-schema] [quo.components.list-items.account-list-card.style :as style] [quo.components.markdown.text :as text] [quo.components.wallet.address-text.view :as address-text] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [schema.core :as schema])) (defn- internal-view [] @@ -39,4 +41,6 @@ (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)) :accessibility-label :icon}]])]))) -(def view (quo.theme/with-theme internal-view)) +(def view + (quo.theme/with-theme + (schema/instrument #'internal-view component-schema/?schema))) diff --git a/src/quo/components/list_items/address/component_spec.cljs b/src/quo/components/list_items/address/component_spec.cljs index c7045a8a22..c55b203daa 100644 --- a/src/quo/components/list_items/address/component_spec.cljs +++ b/src/quo/components/list_items/address/component_spec.cljs @@ -4,32 +4,36 @@ [quo.foundations.colors :as colors] [test-helpers.component :as h])) +(defn- with-defaults + ([] (with-defaults {})) + ([props] (merge {:address "0x0ah...78b"} props))) + (h/describe "List items: address" (h/test "default render" - (h/render [address/view]) + (h/render-with-theme-provider [address/view (with-defaults)]) (h/is-truthy (h/query-by-label-text :container))) (h/test "on-press-in changes state to :pressed" - (h/render [address/view]) + (h/render-with-theme-provider [address/view (with-defaults)]) (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 [address/view {:blur? true}]) + (h/render-with-theme-provider [address/view (with-defaults {: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 [address/view {:active-state? true}]) + (h/render-with-theme-provider [address/view (with-defaults {:active-state? 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/custom-color :blue 50 10)}))) (h/test "on-press-out changes state to :active with blur? enabled" - (h/render [address/view {:active-state? true :blur? true}]) + (h/render-with-theme-provider [address/view (with-defaults {:active-state? true :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) @@ -37,6 +41,6 @@ (h/test "on-press event is called" (let [on-press (h/mock-fn)] - (h/render [address/view {:on-press on-press}]) + (h/render-with-theme-provider [address/view (with-defaults {:on-press on-press})]) (h/fire-event :on-press (h/get-by-label-text :container)) (h/was-called on-press)))) diff --git a/src/quo/components/list_items/address/schema.cljs b/src/quo/components/list_items/address/schema.cljs new file mode 100644 index 0000000000..a52ce6f66f --- /dev/null +++ b/src/quo/components/list_items/address/schema.cljs @@ -0,0 +1,14 @@ +(ns quo.components.list-items.address.schema) + +(def ?schema + [:=> + [:cat + [:map + [:address :string] + [:networks {:optional true} [:* [:map [:network-name :keyword] [:short-name :string]]]] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]] + [:on-press {:optional true} [:maybe fn?]] + [:blur? {:optional true} [:maybe :boolean]] + [:theme :schema.common/theme] + [:active-state? {:optional true} [:maybe :boolean]]]] + :any]) diff --git a/src/quo/components/list_items/address/view.cljs b/src/quo/components/list_items/address/view.cljs index a536eeef18..9f224f93c6 100644 --- a/src/quo/components/list_items/address/view.cljs +++ b/src/quo/components/list_items/address/view.cljs @@ -1,12 +1,14 @@ (ns quo.components.list-items.address.view (:require [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar] + (quo.components.list-items.address.schema :as component-schema) [quo.components.list-items.address.style :as style] [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] [reagent.core :as reagent] + [schema.core :as schema] [utils.address :as address])) (defn- left-container @@ -64,4 +66,7 @@ :address address :blur? blur?}]])))) -(def view (quo.theme/with-theme internal-view)) +(def view + (quo.theme/with-theme + (schema/instrument #'internal-view component-schema/?schema))) + diff --git a/src/quo/components/list_items/saved_contact_address/component_spec.cljs b/src/quo/components/list_items/saved_contact_address/component_spec.cljs index aeef59d293..d743d5ffc6 100644 --- a/src/quo/components/list_items/saved_contact_address/component_spec.cljs +++ b/src/quo/components/list_items/saved_contact_address/component_spec.cljs @@ -4,6 +4,10 @@ [quo.foundations.colors :as colors] [test-helpers.component :as h])) +(defn- with-defaults + ([] (with-defaults {})) + ([props] (merge {:contact-props {:full-name "Thomas Anderson"}} props))) + (def account {:name "New House" :address "0x21a...49e" @@ -12,25 +16,33 @@ (h/describe "List items: saved contact address" (h/test "default render" - (h/render-with-theme-provider [saved-contact-address/view]) + (h/render-with-theme-provider [saved-contact-address/view (with-defaults)]) (h/is-truthy (h/query-by-label-text :container))) (h/test "renders account detail when passing one account" - (h/render-with-theme-provider [saved-contact-address/view {:accounts (repeat 1 account)}]) + (h/render-with-theme-provider [saved-contact-address/view + (with-defaults + {:accounts (repeat 1 account)})]) (h/is-truthy (h/query-by-label-text :account-container))) (h/test "renders account count when passing multiple accounts" - (h/render-with-theme-provider [saved-contact-address/view {:accounts (repeat 2 account)}]) + (h/render-with-theme-provider [saved-contact-address/view + (with-defaults + {:accounts (repeat 2 account)})]) (h/is-truthy (h/query-by-label-text :accounts-count))) (h/test "on-press-in changes state to :pressed" - (h/render-with-theme-provider [saved-contact-address/view {:accounts (repeat 1 account)}]) + (h/render-with-theme-provider [saved-contact-address/view + (with-defaults + {:accounts (repeat 1 account)})]) (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-out changes state to :active if active-state? is true (default value)" - (h/render-with-theme-provider [saved-contact-address/view {:accounts (repeat 1 account)}]) + (h/render-with-theme-provider [saved-contact-address/view + (with-defaults + {:accounts (repeat 1 account)})]) (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) @@ -38,8 +50,9 @@ (h/test "on-press-out changes state to :default if active-state? is false" (h/render-with-theme-provider [saved-contact-address/view - {:accounts (repeat 1 account) - :active-state? false}]) + (with-defaults + {:accounts (repeat 1 account) + :active-state? false})]) (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) @@ -47,9 +60,9 @@ (h/test "on-press calls on-press" (let [on-press (h/mock-fn)] - (h/render-with-theme-provider - [saved-contact-address/view - {:on-press on-press - :accounts (repeat 1 account)}]) + (h/render-with-theme-provider [saved-contact-address/view + (with-defaults + {:on-press on-press + :accounts (repeat 1 account)})]) (h/fire-event :on-press (h/get-by-label-text :container)) (h/was-called on-press)))) diff --git a/src/quo/components/list_items/saved_contact_address/schema.cljs b/src/quo/components/list_items/saved_contact_address/schema.cljs new file mode 100644 index 0000000000..27d7785e57 --- /dev/null +++ b/src/quo/components/list_items/saved_contact_address/schema.cljs @@ -0,0 +1,29 @@ +(ns quo.components.list-items.saved-contact-address.schema) + +(def ^:private ?contact + [:map + [:full-name :string] + [:profile-picture {:optional true} [:maybe [:or :schema.common/image-source :string]]] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]]]) + +(def ^:private ?account + [:map + [:name :string] + [:address :string] + [:emoji {:optional true} :string] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]]]) + +(def ^:private ?accounts + [:+ ?account]) + +(def ?schema + [:=> + [:cat + [:map + [:contact-props ?contact] + [:accounts {:optional true} ?accounts] + [:on-press {:optional true} [:maybe fn?]] + [:theme :schema.common/theme] + [:active-state? {:optional true} [:maybe :boolean]] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]]]] + :any]) diff --git a/src/quo/components/list_items/saved_contact_address/view.cljs b/src/quo/components/list_items/saved_contact_address/view.cljs index 21409ecde6..16c96f00f9 100644 --- a/src/quo/components/list_items/saved_contact_address/view.cljs +++ b/src/quo/components/list_items/saved_contact_address/view.cljs @@ -3,12 +3,14 @@ [quo.components.avatars.account-avatar.view :as account-avatar] [quo.components.avatars.user-avatar.view :as user-avatar] [quo.components.icon :as icon] + [quo.components.list-items.saved-contact-address.schema :as component-schema] [quo.components.list-items.saved-contact-address.style :as style] [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] [reagent.core :as reagent] + [schema.core :as schema] [utils.address :as address] [utils.i18n :as i18n])) @@ -92,4 +94,6 @@ colors/neutral-40 theme)}])])))) -(def view (quo.theme/with-theme internal-view)) +(def view + (quo.theme/with-theme + (schema/instrument #'internal-view component-schema/?schema))) diff --git a/src/quo/components/list_items/token_network/component_spec.cljs b/src/quo/components/list_items/token_network/component_spec.cljs index e43a8cd046..a35ff53882 100644 --- a/src/quo/components/list_items/token_network/component_spec.cljs +++ b/src/quo/components/list_items/token_network/component_spec.cljs @@ -8,40 +8,36 @@ {:token :snt :state :default :label "Status" - :networks [(resources/get-network :ethereum)] + :networks [{:source (resources/get-network :ethereum)}] :token-value "100.00 SNT" :fiat-value "€0.00"}) (h/describe "List items: Token network" (h/test "default state" - (h/render [token-network/view (dissoc props :state)]) + (h/render-with-theme-provider [token-network/view (dissoc props :state)]) (h/is-truthy (h/get-by-text "Status"))) (h/test "default state explicit" - (h/render [token-network/view props]) + (h/render-with-theme-provider [token-network/view props]) (h/is-truthy (h/get-by-text "Status"))) (h/test "Pressed state" - (h/render [token-network/view props]) + (h/render-with-theme-provider [token-network/view props]) (h/fire-event :on-press-in (h/get-by-label-text :token-network)) (h/wait-for #(h/has-style (h/query-by-label-text :token-network) {:backgroundColor (colors/resolve-color :blue :light 5)}))) (h/test "Active state" - (h/render [token-network/view (assoc props :state :active)]) + (h/render-with-theme-provider [token-network/view (assoc props :state :active)]) (h/has-style (h/query-by-label-text :token-network) {:backgroundColor (colors/resolve-color :blue :light 10)})) (h/test "Selected state" - (h/render [token-network/view (assoc props :state :selected)]) + (h/render-with-theme-provider [token-network/view (assoc props :state :selected)]) (h/is-truthy (h/query-by-label-text :check-icon))) (h/test "Call on-press" (let [on-press (h/mock-fn)] - (h/render [token-network/view (assoc props :on-press on-press)]) + (h/render-with-theme-provider [token-network/view (assoc props :on-press on-press)]) (h/fire-event :on-press (h/get-by-label-text :token-network)) - (h/was-called on-press))) - - (h/test "Empty props" - (h/render [token-network/view {}]) - (h/is-truthy (h/get-by-label-text :token-network)))) + (h/was-called on-press)))) diff --git a/src/quo/components/list_items/token_network/schema.cljs b/src/quo/components/list_items/token_network/schema.cljs new file mode 100644 index 0000000000..26d3c7b71f --- /dev/null +++ b/src/quo/components/list_items/token_network/schema.cljs @@ -0,0 +1,16 @@ +(ns quo.components.list-items.token-network.schema) + +(def ?schema + [:=> + [:cat + [:map + [:token :keyword] + [:label :string] + [:token-value :string] + [:fiat-value :string] + [:networks [:* [:map [:source :schema.common/image-source]]]] + [:on-press {:optional true} [:maybe fn?]] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]] + [:state {:optional true} [:enum :default :active :selected]] + [:theme :schema.common/theme]]] + :any]) diff --git a/src/quo/components/list_items/token_network/view.cljs b/src/quo/components/list_items/token_network/view.cljs index 940c37e923..2c4f5f0e8f 100644 --- a/src/quo/components/list_items/token_network/view.cljs +++ b/src/quo/components/list_items/token_network/view.cljs @@ -2,12 +2,14 @@ (:require [quo.components.icon :as icon] [quo.components.list-items.preview-list.view :as preview-list] + [quo.components.list-items.token-network.schema :as component-schema] [quo.components.list-items.token-network.style :as style] [quo.components.markdown.text :as text] [quo.components.utilities.token.view :as token] [quo.theme :as quo.theme] [react-native.core :as rn] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [schema.core :as schema])) (defn- info [{:keys [token label networks]}] @@ -67,4 +69,6 @@ [info props] [values props]])))) -(def view (quo.theme/with-theme view-internal)) +(def view + (quo.theme/with-theme + (schema/instrument #'view-internal component-schema/?schema))) diff --git a/src/quo/components/list_items/token_value/component_spec.cljs b/src/quo/components/list_items/token_value/component_spec.cljs index bb29479f18..97dfccb985 100644 --- a/src/quo/components/list_items/token_value/component_spec.cljs +++ b/src/quo/components/list_items/token_value/component_spec.cljs @@ -5,29 +5,29 @@ (h/describe "List Items: Token Value" (h/test "Token label renders" - (h/render [token-value/view - {:token :snt - :token-name "Status" - :state :default - :status :empty - :customization-color :blue - :metrics? true - :values {:crypto-value "0.00" - :fiat-value "€0.00" - :percentage-change "0.00" - :fiat-change "€0.00"}}]) + (h/render-with-theme-provider [token-value/view + {:token :snt + :token-name "Status" + :state :default + :status :empty + :customization-color :blue + :metrics? true + :values {:crypto-value "0.00" + :fiat-value "€0.00" + :percentage-change "0.00" + :fiat-change "€0.00"}}]) (h/is-truthy (h/get-by-text "Status"))) (h/test "Status change" - (h/render [token-value/view - {:token :snt - :token-name "Status" - :state :default - :status :positive - :customization-color :blue - :metrics? true - :values {:crypto-value "0.00" - :fiat-value "€0.00" - :percentage-change "0.00" - :fiat-change "€0.00"}}]) + (h/render-with-theme-provider [token-value/view + {:token :snt + :token-name "Status" + :state :default + :status :positive + :customization-color :blue + :metrics? true + :values {:crypto-value "0.00" + :fiat-value "€0.00" + :percentage-change "0.00" + :fiat-change "€0.00"}}]) (h/is-truthy (h/get-by-label-text :arrow-icon)))) diff --git a/src/quo/components/list_items/token_value/schema.cljs b/src/quo/components/list_items/token_value/schema.cljs new file mode 100644 index 0000000000..bba8c1424c --- /dev/null +++ b/src/quo/components/list_items/token_value/schema.cljs @@ -0,0 +1,23 @@ +(ns quo.components.list-items.token-value.schema) + +(def ^:private ?values + [:map + [:crypto-value :string] + [:fiat-value :string] + [:percentage-change {:optional true} :string] + [:fiat-change {:optional true} :string]]) + +(def ?schema + [:=> + [:cat + [:map + [:token [:or keyword? string?]] + [:token-name :string] + [:status [:enum :empty :positive :negative]] + [:values ?values] + [:on-press {:optional true} [:maybe fn?]] + [:on-long-press {:optional true} [:maybe fn?]] + [:theme :schema.common/theme] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]] + [:metrics? {:optional true} [:maybe :boolean]]]] + :any]) diff --git a/src/quo/components/list_items/token_value/view.cljs b/src/quo/components/list_items/token_value/view.cljs index 0082b8542e..00f5e66e62 100644 --- a/src/quo/components/list_items/token_value/view.cljs +++ b/src/quo/components/list_items/token_value/view.cljs @@ -2,13 +2,15 @@ (:require [clojure.string :as string] [quo.components.icon :as icon] + [quo.components.list-items.token-value.schema :as component-schema] [quo.components.list-items.token-value.style :as style] [quo.components.markdown.text :as text] [quo.components.utilities.token.view :as token] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [schema.core :as schema])) (defn- internal-view [] @@ -65,4 +67,6 @@ [icon/icon (if (= status :positive) :i/positive :i/negative) (style/arrow-icon status theme)]])])]])))) -(def view (quo.theme/with-theme internal-view)) +(def view + (quo.theme/with-theme + (schema/instrument #'internal-view component-schema/?schema))) diff --git a/src/quo/components/wallet/address_text/schema.cljs b/src/quo/components/wallet/address_text/schema.cljs index 862b52b7ad..5aac406c99 100644 --- a/src/quo/components/wallet/address_text/schema.cljs +++ b/src/quo/components/wallet/address_text/schema.cljs @@ -10,5 +10,5 @@ [:format {:optional true} [:enum :short :long]] [:theme :schema.common/theme] [:networks {:optional true} - [:maybe [:sequential [:map [:name :keyword] [:short-name :string]]]]]]]] + [:maybe [:sequential [:map [:network-name :keyword] [:short-name :string]]]]]]]] :any]) diff --git a/src/quo/components/wallet/address_text/view.cljs b/src/quo/components/wallet/address_text/view.cljs index 52c9f2e935..8b5eed7f5e 100644 --- a/src/quo/components/wallet/address_text/view.cljs +++ b/src/quo/components/wallet/address_text/view.cljs @@ -20,7 +20,8 @@ (let [network-text-xf (map #(colored-network-text theme %)) address-text [text/text {:size :paragraph-2 - ;; TODO: monospace font https://github.com/status-im/status-mobile/issues/17009 + ;; TODO: monospace font + ;; https://github.com/status-im/status-mobile/issues/17009 :weight :monospace :style (style/address-text format blur? theme)} (if (= format :short) diff --git a/src/quo/components/wallet/keypair/component_spec.cljs b/src/quo/components/wallet/keypair/component_spec.cljs index ae218460c5..1997044e1c 100644 --- a/src/quo/components/wallet/keypair/component_spec.cljs +++ b/src/quo/components/wallet/keypair/component_spec.cljs @@ -12,9 +12,8 @@ :type :default :name "Trip to Vegas" :address "0x0ah...71a"} - :networks [{:name :ethereum :short-name "eth"} - {:name :optimism :short-name "opt"}] - :state :default + :networks [{:network-name :ethereum :short-name "eth"} + {:network-name :optimism :short-name "opt"}] :action :none}]) (def default-details diff --git a/src/quo/components/wallet/keypair/view.cljs b/src/quo/components/wallet/keypair/view.cljs index 50bfff8170..2d20e4a81e 100644 --- a/src/quo/components/wallet/keypair/view.cljs +++ b/src/quo/components/wallet/keypair/view.cljs @@ -86,6 +86,10 @@ colors/white-opa-40 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])])) +(defn- acc-list-card + [item & _rest] + [account-list-card/view item]) + (defn- view-internal [{:keys [default-selected?]}] (let [selected? (reagent/atom default-selected?)] @@ -102,7 +106,7 @@ [details-view props]]] [rn/flat-list {:data accounts - :render-fn account-list-card/view + :render-fn acc-list-card :separator [rn/view {:style {:height 8}}] :style {:padding-horizontal 8}}]]))) diff --git a/src/status_im/contexts/preview/quo/drawers/drawer_top.cljs b/src/status_im/contexts/preview/quo/drawers/drawer_top.cljs index ee53bc8722..e8911eacb7 100644 --- a/src/status_im/contexts/preview/quo/drawers/drawer_top.cljs +++ b/src/status_im/contexts/preview/quo/drawers/drawer_top.cljs @@ -45,7 +45,7 @@ :type :default :label "Drawer label" :keycard? true - :networks [{:name :ethereum :short-name "eth"}] + :networks [{:network-name :ethereum :short-name "eth"}] :description "0x62b...0a5" :button-icon :i/placeholder :community-name "Coinbase" diff --git a/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs b/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs index f0a7d5267c..29a35a9bce 100644 --- a/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs +++ b/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs @@ -16,8 +16,8 @@ {:type :account :blur? false :title "Collectibles vault" - :networks [{:name :ethereum :short-name "eth"} - {:name :optimism :short-name "opt"}] + :networks [{:network-name :ethereum :short-name "eth"} + {:network-name :optimism :short-name "opt"}] :description "0x0ah...78b" :account-avatar-emoji "🍿" :customization-color (or customization-color :blue)}] diff --git a/src/status_im/contexts/preview/quo/list_items/account.cljs b/src/status_im/contexts/preview/quo/list_items/account.cljs index ef2b99be99..8c3af81ab0 100644 --- a/src/status_im/contexts/preview/quo/list_items/account.cljs +++ b/src/status_im/contexts/preview/quo/list_items/account.cljs @@ -43,9 +43,14 @@ :show-blur-background? true :blur-dark-only? true} [quo/account-item - (merge @state - {:title-icon (when (:title-icon? @state) :i/keycard) - :account-props {:name (:title @state) - :address (:address @state) - :emoji (:emoji @state) - :customization-color (:account-color @state)}})]]))) + (dissoc (merge @state + {:title-icon (when (:title-icon? @state) :i/keycard) + :account-props {:name (:title @state) + :address (:address @state) + :emoji (:emoji @state) + :customization-color (:account-color @state)}}) + :emoji + :address + :title-icon? + :account-color + :title)]]))) diff --git a/src/status_im/contexts/preview/quo/list_items/account_list_card.cljs b/src/status_im/contexts/preview/quo/list_items/account_list_card.cljs index 2cc06374d3..93983f45c5 100644 --- a/src/status_im/contexts/preview/quo/list_items/account_list_card.cljs +++ b/src/status_im/contexts/preview/quo/list_items/account_list_card.cljs @@ -20,8 +20,8 @@ :type :default :name "Trip to Vegas" :address "0x0ah...78b"} - :networks [{:name :ethereum :short-name "eth"} - {:name :optimism :short-name "opt"}] + :networks [{:network-name :ethereum :short-name "eth"} + {:network-name :optimism :short-name "opt"}] :action :none :on-press (fn [] (js/alert "Item pressed")) :on-options-press (fn [] (js/alert "Options pressed")) diff --git a/src/status_im/contexts/preview/quo/list_items/address.cljs b/src/status_im/contexts/preview/quo/list_items/address.cljs index fc92d2a35e..f5530e0cf7 100644 --- a/src/status_im/contexts/preview/quo/list_items/address.cljs +++ b/src/status_im/contexts/preview/quo/list_items/address.cljs @@ -13,8 +13,8 @@ (defn view [] (let [state (reagent/atom {:address "0x0ah...78b" - :networks [{:name :ethereum :short-name "eth"} - {:name :optimism :short-name "opt"}]})] + :networks [{:network-name :ethereum :short-name "eth"} + {:network-name :optimism :short-name "opt"}]})] (fn [] [preview/preview-container {:state state diff --git a/src/status_im/contexts/preview/quo/wallet/keypair.cljs b/src/status_im/contexts/preview/quo/wallet/keypair.cljs index 5fc137f3cd..f74edb47a0 100644 --- a/src/status_im/contexts/preview/quo/wallet/keypair.cljs +++ b/src/status_im/contexts/preview/quo/wallet/keypair.cljs @@ -12,8 +12,8 @@ :type :default :name "Trip to Vegas" :address "0x0ah...71a"} - :networks [{:name :ethereum :short-name "eth"} - {:name :optimism :short-name "opt"}] + :networks [{:network-name :ethereum :short-name "eth"} + {:network-name :optimism :short-name "opt"}] :state :default :action :none} {:account-props {:customization-color :purple @@ -22,8 +22,8 @@ :type :default :name "My savings" :address "0x0ah...72b"} - :networks [{:name :ethereum :short-name "eth"} - {:name :optimism :short-name "opt"}] + :networks [{:network-name :ethereum :short-name "eth"} + {:network-name :optimism :short-name "opt"}] :state :default :action :none} {:account-props {:customization-color :army @@ -32,8 +32,8 @@ :type :default :name "Coin vault" :address "0x0ah...73c"} - :networks [{:name :ethereum :short-name "eth"} - {:name :optimism :short-name "opt"}] + :networks [{:network-name :ethereum :short-name "eth"} + {:network-name :optimism :short-name "opt"}] :state :default :action :none} {:account-props {:customization-color :orange @@ -42,8 +42,8 @@ :type :default :name "Crypto fortress" :address "0x0ah...74e"} - :networks [{:name :ethereum :short-name "eth"} - {:name :optimism :short-name "opt"}] + :networks [{:network-name :ethereum :short-name "eth"} + {:network-name :optimism :short-name "opt"}] :state :default :action :none} {:account-props {:customization-color :yellow @@ -52,8 +52,8 @@ :type :default :name "Block treasure" :address "0x0ah...75f"} - :networks [{:name :ethereum :short-name "eth"} - {:name :optimism :short-name "opt"}] + :networks [{:network-name :ethereum :short-name "eth"} + {:network-name :optimism :short-name "opt"}] :state :default :action :none}]) diff --git a/src/status_im/contexts/wallet/home/tabs/assets/view.cljs b/src/status_im/contexts/wallet/home/tabs/assets/view.cljs index 4bf05892ca..2c04c72ea6 100644 --- a/src/status_im/contexts/wallet/home/tabs/assets/view.cljs +++ b/src/status_im/contexts/wallet/home/tabs/assets/view.cljs @@ -5,6 +5,10 @@ [status-im.contexts.wallet.home.tabs.assets.style :as style] [utils.re-frame :as rf])) +(defn- token-value + [item & _rest] + [quo/token-value item]) + (defn view [] (let [tokens-loading? (rf/sub [:wallet/tokens-loading?]) @@ -15,6 +19,6 @@ :parent-height 560 :animated? false}] [rn/flat-list - {:render-fn quo/token-value + {:render-fn token-value :data tokens :content-container-style style/list-container}])))