Malli schemas added to components (#18949)

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)

src/quo/components/list_items/account/component_spec.cljs

@@ -6,80 +6,111 @@
 
 (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)))
 
   (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))

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])

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)))

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))))

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])

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)))

src/quo/components/list_items/address/component_spec.cljs

@@ -4,39 +4,43 @@
     [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)
                               {:backgroundColor colors/white-opa-10})))
 
   (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))))

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])

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)))
+