Wallet - Add malli spec to Quo Wallet components (batch 1) #18354 (#18707)

* draft

* add account_card

* add account-origin

* add account_overview

* add account_permission

* add address_text

* add confirmation_progress

* wrapping up

* resolve comments and fix ci issues

* fix ci issues

* fix transaction_progress tests

* fix all tests

* fix lint issues

src/quo/components/drawers/drawer_top/component_spec.cljs

@@ -3,97 +3,110 @@
     [quo.core :as quo]
     [test-helpers.component :as h]))
 
+(def ^:private theme :light)
+
 (h/describe "drawer top tests"
   (h/test "component renders in default type"
-    (h/render [quo/drawer-top
+    (h/render-with-theme-provider [quo/drawer-top
                                    {:title "Title"
-                :type  :default}])
+                                    :type  :default}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title")))
 
   (h/test "component renders in default + description type"
-    (h/render [quo/drawer-top
+    (h/render-with-theme-provider [quo/drawer-top
                                    {:title       "Title"
                                     :type        :default
-                :description "Description"}])
+                                    :description "Description"}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (h/is-truthy (h/get-by-text "Description")))
 
   (h/test "component renders in info type"
-    (h/render [quo/drawer-top
+    (h/render-with-theme-provider [quo/drawer-top
                                    {:title "Title"
-                :type  :info}])
+                                    :type  :info}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (h/is-truthy (h/get-by-label-text :info-icon)))
 
   (h/test "component renders in info + description type"
-    (h/render [quo/drawer-top
+    (h/render-with-theme-provider [quo/drawer-top
                                    {:title       "Title"
                                     :description "Description"
-                :type        :info}])
+                                    :type        :info}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (h/is-truthy (h/get-by-text "Description"))
     (h/is-truthy (h/get-by-label-text :info-icon)))
 
   (h/test "component renders in context-tag type"
-    (h/render [quo/drawer-top
+    (h/render-with-theme-provider [quo/drawer-top
                                    {:title          "Title"
                                     :type           :context-tag
-                :community-name "Coinbase"}])
+                                    :community-name "Coinbase"}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (h/is-truthy (h/get-by-label-text :context-tag-wrapper)))
 
   (h/test "component renders in context-tag + button type"
-    (h/render [quo/drawer-top
+    (h/render-with-theme-provider [quo/drawer-top
                                    {:title          "Title"
                                     :type           :context-tag
                                     :button-icon    :i/placeholder
-                :community-name "Coinbase"}])
+                                    :community-name "Coinbase"}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (h/is-truthy (h/get-by-label-text :button-icon))
     (h/is-truthy (h/get-by-label-text :context-tag-wrapper)))
 
   (h/test "component renders in account type"
-    (h/render [quo/drawer-top
+    (h/render-with-theme-provider [quo/drawer-top
                                    {:title                "Title"
                                     :type                 :account
                                     :account-avatar-emoji "🍿"
                                     :networks             [{:name :ethereum :short-name "eth"}]
                                     :description          "0x62b...0a5"
-                :customization-color  :purple}])
+                                    :customization-color  :purple}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (h/is-truthy (h/get-by-text "0x62b...0a5"))
     (h/is-truthy (h/get-by-label-text :account-avatar)))
 
   (h/test "component renders in keypair type when keycard? is false"
-    (h/render [quo/drawer-top
+    (h/render-with-theme-provider [quo/drawer-top
                                    {:title       "Title"
                                     :keycard?    false
                                     :icon-avatar :i/placeholder
-                :type        :keypair}])
+                                    :type        :keypair}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (-> (h/expect (h/get-by-translation-text :t/on-device))
         (.toBeTruthy)))
 
   (h/test "component renders in keypair type when keycard? is true"
-    (h/render [quo/drawer-top
+    (h/render-with-theme-provider [quo/drawer-top
                                    {:title       "Title"
                                     :keycard?    true
                                     :icon-avatar :i/placeholder
-                :type        :keypair}])
+                                    :type        :keypair}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (-> (h/expect (h/get-by-translation-text :t/on-keycard))
         (.toBeTruthy)))
 
   (h/test "component renders in default-keypair type"
-    (h/render [quo/drawer-top
+    (h/render-with-theme-provider [quo/drawer-top
                                    {:title       "Title"
                                     :description "0x62b...0a5"
-                :type        :default-keypair}])
+                                    :type        :default-keypair}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (h/is-truthy (h/get-by-label-text :default-keypair-text)))
 
   (h/test "component renders in label type"
-    (h/render [quo/drawer-top
+    (h/render-with-theme-provider [quo/drawer-top
                                    {:label "label"
-                :type  :label}])
+                                    :type  :label}]
+                                  theme)
     (h/is-truthy (h/get-by-text "label"))))

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

@@ -4,79 +4,83 @@
     [quo.foundations.colors :as colors]
     [test-helpers.component :as h]))
 
+(def ^:private theme :light)
+
 (h/describe "List items: account"
   (h/test "default render'"
-    (h/render [account/view])
+    (h/render-with-theme-provider [account/view] theme)
     (h/is-truthy (h/query-by-label-text :container)))
 
   (h/test "on-press-in changes state to :pressed"
-    (h/render [account/view])
+    (h/render-with-theme-provider [account/view] 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 [account/view {:blur? true}])
+    (h/render-with-theme-provider [account/view {: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 [account/view {:state :active}])
+    (h/render-with-theme-provider [account/view {: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 [account/view
+    (h/render-with-theme-provider [account/view
                                    {:blur? true
-                :state :active}])
+                                    :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 [account/view {:state :selected}])
+    (h/render-with-theme-provider [account/view {: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 [account/view {:on-press on-press}])
+      (h/render-with-theme-provider [account/view {: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 [account/view {:type :tag}])
+    (h/render-with-theme-provider [account/view {:type :tag}] theme)
     (h/is-truthy (h/query-by-label-text :tag-container)))
 
   (h/test "renders keycard icon if title-icon is present"
-    (h/render [account/view {:title-icon :i/placeholder}])
+    (h/render-with-theme-provider [account/view {: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 [account/view])
+    (h/render-with-theme-provider [account/view] 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 [account/view {:type :balance-neutral}])
+    (h/render-with-theme-provider [account/view {:type :balance-neutral}] 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 [account/view {:type :balance-negative}])
+    (h/render-with-theme-provider [account/view {:type :balance-negative}] 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 [account/view {:type :balance-positive}])
+    (h/render-with-theme-provider [account/view {:type :balance-positive}] 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 [account/view
+      (h/render-with-theme-provider [account/view
                                      {:type             :action
-                  :on-options-press on-options-press}])
+                                      :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))
       (h/was-called on-options-press))))

src/quo/components/wallet/account_card/component_spec.cljs

@@ -5,6 +5,7 @@
 
 (def username "Alisher account")
 (def empty-username "Account 1")
+(def ^:private theme :light)
 
 (defn get-test-data
   [{:keys [type watch-only? empty-type? loading? no-metrics?]}]
@@ -21,54 +22,54 @@
 (h/describe "Account_card tests"
   (h/test "Renders Default"
     (let [data (get-test-data {:type :default})]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-truthy (h/get-by-text username))))
 
   (h/test "Renders Watch-Only"
     (let [data (get-test-data {:type        :watch-only
                                :watch-only? true})]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-truthy (h/get-by-text username))))
 
   (h/test "Renders Add-Account"
     (let [data {:type :add-account}]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-truthy (h/get-by-label-text :add-account))))
 
   (h/test "Renders Empty"
     (let [data (get-test-data {:type        :empty
                                :empty-type? true})]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-truthy (h/get-by-text empty-username))))
 
   (h/test "Renders Missing Keypair"
     (let [data (get-test-data {:type :missing-keypair})]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-truthy (h/get-by-text username))))
 
   (h/test "Add account on press fires correctly"
     (let [on-press (h/mock-fn)
           data     {:type     :add-account
                     :on-press on-press}]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/fire-event :on-press (h/get-by-label-text :add-account))
       (h/was-called on-press)))
 
   (h/test "Renders component without metrics"
     (let [data (get-test-data {:type        :default
                                :no-metrics? true})]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-falsy (h/query-by-label-text :metrics))))
 
   (h/test "Renders loading state"
     (let [data (get-test-data {:type     :default
                                :loading? true})]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-truthy (h/get-by-label-text :loading))))
 
   (h/test "Renders loading state without metrics"
     (let [data (get-test-data {:type        :default
                                :no-metrics? true
                                :loading?    true})]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-falsy (h/query-by-label-text :metrics)))))

src/quo/components/wallet/account_card/schema.cljs

@@ -0,0 +1,33 @@
+(ns quo.components.wallet.account-card.schema)
+
+(def ^:private ?base
+  [:map
+   [:type {:optional true} [:enum :default :watch-only :add-account :empty :missing-keypair]]
+   [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
+   [:theme :schema.common/theme]
+   [:metrics? {:optional true} [:maybe :boolean]]
+   [:on-press {:optional true} [:maybe fn?]]])
+
+(def ^:private ?amount
+  [:map
+   [:amount {:optional true} [:maybe :string]]])
+
+(def ^:private ?card
+  [:map
+   [:balance {:optional true} [:maybe :string]]
+   [:loading? {:optional true} [:maybe :boolean]]
+   [:name {:optional true} [:maybe :string]]
+   [:percentage-value {:optional true} [:maybe :string]]
+   [:emoji {:optional true} [:maybe :string]]])
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:multi {:dispatch :type}
+      [:default [:merge ?base ?amount ?card]]
+      [:watch-only [:merge ?base ?amount ?card]]
+      [:missing-keypair [:merge ?base ?amount ?card]]
+      [:empty [:merge ?base ?card]]
+      [:add-account ?base]]]]
+   :any])

src/quo/components/wallet/account_card/view.cljs

@@ -4,13 +4,15 @@
     [quo.components.icon :as icon]
     [quo.components.markdown.text :as text]
     [quo.components.wallet.account-card.properties :as properties]
+    [quo.components.wallet.account-card.schema :as component-schema]
     [quo.components.wallet.account-card.style :as style]
     [quo.foundations.colors :as colors]
     [quo.foundations.customization-colors :as customization-colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [react-native.linear-gradient :as linear-gradient]
-    [reagent.core :as reagent]))
+    [reagent.core :as reagent]
+    [schema.core :as schema]))
 
 (defn- loading-view
   [{:keys [customization-color type theme metrics?]}]
@@ -183,4 +185,6 @@
     :add-account                                   [add-account-view props]
     nil))
 
-(def view (quo.theme/with-theme view-internal))
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal component-schema/?schema)))

src/quo/components/wallet/account_origin/component_spec.cljs

@@ -3,92 +3,104 @@
     [quo.core :as quo]
     [test-helpers.component :as h]))
 
+(def ^:private theme :light)
+
 (h/describe "account origin tests"
   (h/test "component renders"
-    (h/render [quo/account-origin
+    (h/render-with-theme-provider [quo/account-origin
                                    {:type            :recovery-phrase
                                     :stored          :on-keycard
                                     :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
-                :user-name       "Test Name"}])
+                                    :user-name       "Test Name"}]
+                                  theme)
     (-> (h/expect (h/get-by-translation-text :t/origin))
         (.toBeTruthy)))
 
   (h/test "recovery phrase icon is visible when :type is :recovery-phrase"
-    (h/render [quo/account-origin
+    (h/render-with-theme-provider [quo/account-origin
                                    {:type            :recovery-phrase
                                     :stored          :on-keycard
                                     :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
-                :user-name       "Test Name"}])
+                                    :user-name       "Test Name"}]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :recovery-phrase-icon)))
 
   (h/test "recovery phrase icon is visible when :type is :recovery-phrase"
-    (h/render [quo/account-origin
+    (h/render-with-theme-provider [quo/account-origin
                                    {:type            :recovery-phrase
                                     :stored          :on-keycard
                                     :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
-                :user-name       "Test Name"}])
+                                    :user-name       "Test Name"}]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :recovery-phrase-icon)))
 
   (h/test "private-key-icon is visible when :type is :private-key"
-    (h/render [quo/account-origin
+    (h/render-with-theme-provider [quo/account-origin
                                    {:type            :private-key
                                     :stored          :on-keycard
                                     :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
-                :user-name       "Test Name"}])
+                                    :user-name       "Test Name"}]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :private-key-icon)))
 
   (h/test "derivation-path-icon is visible when :type is :default-keypair"
-    (h/render [quo/account-origin
+    (h/render-with-theme-provider [quo/account-origin
                                    {:type            :default-keypair
                                     :stored          :on-keycard
                                     :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
-                :user-name       "Test Name"}])
+                                    :user-name       "Test Name"}]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :derivation-path-icon)))
 
   (h/test "derivation-path-icon is visible when :type is :recovery-phrase"
-    (h/render [quo/account-origin
+    (h/render-with-theme-provider [quo/account-origin
                                    {:type            :recovery-phrase
                                     :stored          :on-keycard
                                     :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
-                :user-name       "Test Name"}])
+                                    :user-name       "Test Name"}]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :derivation-path-icon)))
 
   (h/test "on-device text is visible when :stored is :on-device"
-    (h/render [quo/account-origin
+    (h/render-with-theme-provider [quo/account-origin
                                    {:type            :recovery-phrase
                                     :stored          :on-device
                                     :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
-                :user-name       "Test Name"}])
+                                    :user-name       "Test Name"}]
+                                  theme)
     (-> (h/expect (h/get-by-translation-text :t/on-device))
         (.toBeTruthy)))
 
   (h/test "on-keycard text is visible when :stored is :on-keycard"
-    (h/render [quo/account-origin
+    (h/render-with-theme-provider [quo/account-origin
                                    {:type            :recovery-phrase
                                     :stored          :on-keycard
                                     :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
-                :user-name       "Test Name"}])
+                                    :user-name       "Test Name"}]
+                                  theme)
     (-> (h/expect (h/get-by-translation-text :t/on-keycard))
         (.toBeTruthy)))
 
   (h/test "on-press is called when :type is :recovery-phrase"
     (let [on-press (h/mock-fn)]
-      (h/render [quo/account-origin
+      (h/render-with-theme-provider [quo/account-origin
                                      {:type            :recovery-phrase
                                       :stored          :on-keycard
                                       :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
                                       :user-name       "Test Name"
-                  :on-press        on-press}])
+                                      :on-press        on-press}]
+                                    theme)
       (h/fire-event :press (h/query-by-label-text :derivation-path-button))
       (h/was-called on-press)))
 
   (h/test "on-press is called when :type is :default-keypair"
     (let [on-press (h/mock-fn)]
-      (h/render [quo/account-origin
+      (h/render-with-theme-provider [quo/account-origin
                                      {:type            :default-keypair
                                       :stored          :on-keycard
                                       :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
                                       :user-name       "Test Name"
-                  :on-press        on-press}])
+                                      :on-press        on-press}]
+                                    theme)
       (h/fire-event :press (h/query-by-label-text :derivation-path-button))
       (h/was-called on-press))))

src/quo/components/wallet/account_origin/schema.cljs

@@ -0,0 +1,30 @@
+(ns quo.components.wallet.account-origin.schema)
+
+(def ^:private ?base
+  [:map
+   [:type {:optional true} [:enum :default-keypair :recovery-phrase :private-key]]
+   [:stored {:optional true} [:enum :on-device :on-keycard]]
+   [:theme :schema.common/theme]])
+
+(def ^:private ?default-keypair
+  [:map
+   [:user-name {:optional true} [:maybe :string]]
+   [:profile-picture {:optional true} [:maybe [:or :schema.common/image-source :string]]]
+   [:derivation-path {:optional true} [:maybe :string]]
+   [:on-press {:optional true} [:maybe fn?]]
+   [:customization-color {:optional true} [:maybe :schema.common/customization-color]]])
+
+(def ^:private ?recovery-phrase
+  [:map
+   [:derivation-path {:optional true} [:maybe :string]]
+   [:on-press {:optional true} [:maybe fn?]]])
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:multi {:dispatch :type}
+      [:default-keypair [:merge ?base ?default-keypair]]
+      [:recovery-phrase [:merge ?base ?recovery-phrase]]
+      [:private-key ?base]]]]
+   :any])

src/quo/components/wallet/account_origin/view.cljs

@@ -3,10 +3,12 @@
     [quo.components.avatars.user-avatar.view :as user-avatar]
     [quo.components.icon :as icons]
     [quo.components.markdown.text :as text]
+    [quo.components.wallet.account-origin.schema :as component-schema]
     [quo.components.wallet.account-origin.style :as style]
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
+    [schema.core :as schema]
     [utils.i18n :as i18n]))
 
 (defn- row-title
@@ -107,14 +109,5 @@
        [card-view theme derivation-path secondary-color on-press])]))
 
 (def view
-  "Create an account-origin UI component.
+  (quo.theme/with-theme
-  | key                   | values                                         |
+   (schema/instrument #'view-internal component-schema/?schema)))
-  | ----------------------|------------------------------------------------|
-  | :type                 | :default-keypair :recovery-phrase :private-key 
-  | :stored               | :on-device :on-keycard
-  | :profile-picture      | image source
-  | :customization-color  | profile color
-  | :derivation-path      | string
-  | :user-name            | string
-  | :on-press             | function"
-  (quo.theme/with-theme view-internal))

src/quo/components/wallet/account_overview/schema.cljs

@@ -0,0 +1,20 @@
+(ns quo.components.wallet.account-overview.schema)
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map
+      [:account-name {:optional true} [:maybe :string]]
+      [:currency-change {:optional true} [:maybe :string]]
+      [:current-value {:optional true} [:maybe :string]]
+      [:percentage-change {:optional true} [:maybe :string]]
+      [:time-frame-string {:optional true} [:maybe :string]]
+      [:time-frame-to-string {:optional true} [:maybe :string]]
+      [:state {:optional true} [:enum :default :loading]]
+      [:metrics {:optional true} [:enum :negative :positive]]
+      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
+      [:account {:optional true} [:enum :default :watched-address]]
+      [:time-frame {:optional true}
+       [:enum :one-week :one-month :three-months :one-year :all-time :custom]]]]]
+   :any])

src/quo/components/wallet/account_overview/view.cljs

@@ -2,10 +2,12 @@
   (:require
     [quo.components.icon :as icons]
     [quo.components.markdown.text :as text]
+    [quo.components.wallet.account-overview.schema :as component-schema]
     [quo.components.wallet.account-overview.style :as style]
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
+    [schema.core :as schema]
     [utils.i18n :as i18n]))
 
 (defn- loading-state
@@ -129,16 +131,5 @@
            [numeric-changes percentage-change currency-change customization-color theme up?])]])]))
 
 (def view
-  "Create a account-overview UI component.
+  (quo.theme/with-theme
-     | key          | description |
+   (schema/instrument #'view-internal component-schema/?schema)))
-  | -------------|-------------|
-  | `:account-name`      | A value representing the account name (default `nil`)
-  | `:account`           | A value that represents if the account is a `:watched-address` or a `:default` account. (default `nil`)
-  | `:time-frame`        | A value that represents the type of the timeframe, Can be from a preset of time frames. `[:1-week :1-month :3-months :1-year :custom]` (default `nil`) if custom is set, We expect a start time and if there's a space between two times that are in `time-frame-string` we'll split them with an arrow to the right icon
-  | `:loading?`          | A value that indicates that component is loading data. (default `nil`)
-  | `:metrics`           | A value that indicates if the account value have increased can be `:positive` or `:negative` (default `nil`)
-  | `:time-frame-string` | A value representing time frame string. (default `nil`)
-  | `:current-value`     | A value representing the current value of the selected account. (default `nil`)
-  | `:currency-change`   | A value representing the change of the value of the selected account in the selected currency. (default `nil`)
-  | `:percentage-change` | A value representing the change of the value of the selected account in percentage relative to it's previous value. (default `nil`)"
-  (quo.theme/with-theme view-internal))

src/quo/components/wallet/account_permissions/schema.cljs

@@ -0,0 +1,22 @@
+(ns quo.components.wallet.account-permissions.schema
+  (:require [quo.components.wallet.required-tokens.view :as required-tokens]))
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map
+      [:account
+       [:map
+        [:name [:maybe :string]]
+        [:address [:maybe :string]]
+        [:emoji [:maybe :string]]
+        [:customization-color {:optional true} [:maybe :schema.common/customization-color]]]]
+      [:token-details {:optional true} [:maybe [:vector required-tokens/?schema]]]
+      [:keycard? {:optional true} [:maybe :boolean]]
+      [:checked? {:optional true} [:maybe :boolean]]
+      [:disabled? {:optional true} [:maybe :boolean]]
+      [:on-change {:optional true} [:maybe fn?]]
+      [:container-style {:optional true} [:maybe :map]]
+      [:theme :schema.common/theme]]]]
+   :any])

src/quo/components/wallet/account_permissions/view.cljs

@@ -4,6 +4,7 @@
             [quo.components.icon :as icons]
             [quo.components.markdown.text :as text]
             [quo.components.selectors.selectors.view :as selectors]
+            [quo.components.wallet.account-permissions.schema :as component-schema]
             [quo.components.wallet.account-permissions.style :as style]
             [quo.components.wallet.address-text.view :as address-text]
             [quo.components.wallet.required-tokens.view :as required-tokens]
@@ -13,26 +14,6 @@
             [schema.core :as schema]
             [utils.i18n :as i18n]))
 
-(def ?schema
-  [:=>
-   [:catn
-    [:props
-     [:map {:closed true}
-      [:account
-       [:map {:closed true}
-        [:name [:maybe :string]]
-        [:address [:maybe :string]]
-        [:emoji [:maybe :string]]
-        [:customization-color [:maybe [:or :string :keyword]]]]]
-      [:token-details {:optional true} [:maybe [:sequential required-tokens/?schema]]]
-      [:keycard? {:optional true} [:maybe :boolean]]
-      [:checked? {:optional true} [:maybe :boolean]]
-      [:disabled? {:optional true} [:maybe :boolean]]
-      [:on-change {:optional true} [:maybe fn?]]
-      [:container-style {:optional true} [:maybe :map]]
-      [:theme :schema.common/theme]]]]
-   :any])
-
 (defn- token-details-section
   [tokens]
   (when tokens
@@ -95,4 +76,4 @@
 
 (def view
   (quo.theme/with-theme
-   (schema/instrument #'view-internal ?schema)))
+   (schema/instrument #'view-internal component-schema/?schema)))

src/quo/components/wallet/address_text/schema.cljs

@@ -0,0 +1,14 @@
+(ns quo.components.wallet.address-text.schema)
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map
+      [:address {:optional true} [:maybe :string]]
+      [:blur? {:optional true} [:maybe :boolean]]
+      [:format {:optional true} [:enum :short :long]]
+      [:theme :schema.common/theme]
+      [:networks {:optional true}
+       [:maybe [:sequential [:map [:name :keyword] [:short-name :string]]]]]]]]
+   :any])

src/quo/components/wallet/address_text/view.cljs

@@ -1,8 +1,10 @@
 (ns quo.components.wallet.address-text.view
   (:require [quo.components.markdown.text :as text]
+            [quo.components.wallet.address-text.schema :as component-schema]
             [quo.components.wallet.address-text.style :as style]
             [quo.foundations.colors :as colors]
             [quo.theme]
+            [schema.core :as schema]
             [utils.address :as utils]))
 
 (defn- colored-network-text
@@ -28,4 +30,6 @@
       (into [text/text] network-text-xf $)
       (conj $ address-text))))
 
-(def view (quo.theme/with-theme view-internal))
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal component-schema/?schema)))

src/quo/components/wallet/confirmation_progress/component_spec.cljs

@@ -1,99 +1,111 @@
 (ns quo.components.wallet.confirmation-progress.component-spec
   (:require [quo.core :as quo]
-            [reagent.core :as reagent]
             [test-helpers.component :as h]))
 
+(def ^:private theme :light)
+
 (defn- get-test-data
   [{:keys [state network]
     :or   {state :pending network :mainnet}}]
-  {:counter             (reagent/atom 0)
+  {:counter             0
    :total-box           85
-   :progress-value      "10"
+   :progress-value      10
    :network             network
    :state               state
    :customization-color :blue})
 
 (h/describe "Confirmation Progress"
   (h/test "component renders when state is sending and network is optimism"
-    (h/render [quo/confirmation-propgress
+    (h/render-with-theme-provider [quo/confirmation-propgress
                                    (get-test-data {:state   :sending
-                               :network :optimism})])
+                                                   :network :optimism})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :progress-box)))
 
   (h/test "component renders when state is confirmed and network is optimism"
-    (h/render [quo/confirmation-propgress
+    (h/render-with-theme-provider [quo/confirmation-propgress
                                    (get-test-data {:state   :confirmed
-                               :network :optimism})])
+                                                   :network :optimism})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :progress-box)))
 
   (h/test "component renders when state is finalising and network is optimism"
-    (h/render [quo/confirmation-propgress
+    (h/render-with-theme-provider [quo/confirmation-propgress
                                    (get-test-data {:state   :finalising
-                               :network :optimism})])
+                                                   :network :optimism})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :progress-box)))
 
   (h/test "component renders when state is finalized and network is optimism"
-    (h/render [quo/confirmation-propgress
+    (h/render-with-theme-provider [quo/confirmation-propgress
                                    (get-test-data {:state   :finalized
-                               :network :optimism})])
+                                                   :network :optimism})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :progress-box)))
 
   (h/test "component renders when state is error and network is optimism"
-    (h/render [quo/confirmation-propgress
+    (h/render-with-theme-provider [quo/confirmation-propgress
                                    (get-test-data {:state   :error
-                               :network :optimism})])
+                                                   :network :optimism})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :progress-box)))
 
   (h/test "component renders when state is sending and network is arbitrum"
-    (h/render [quo/confirmation-propgress
+    (h/render-with-theme-provider [quo/confirmation-propgress
                                    (get-test-data {:state   :sending
-                               :network :arbitrum})])
+                                                   :network :arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :progress-box)))
 
   (h/test "component renders when state is confirmed and network is arbitrum"
-    (h/render [quo/confirmation-propgress
+    (h/render-with-theme-provider [quo/confirmation-propgress
                                    (get-test-data {:state   :confirmed
-                               :network :arbitrum})])
+                                                   :network :arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :progress-box)))
 
   (h/test "component renders when state is finalising and network is arbitrum"
-    (h/render [quo/confirmation-propgress
+    (h/render-with-theme-provider [quo/confirmation-propgress
                                    (get-test-data {:state   :finalising
-                               :network :arbitrum})])
+                                                   :network :arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :progress-box)))
 
   (h/test "component renders when state is finalized and network is arbitrum"
-    (h/render [quo/confirmation-propgress
+    (h/render-with-theme-provider [quo/confirmation-propgress
                                    (get-test-data {:state   :finalized
-                               :network :arbitrum})])
+                                                   :network :arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :progress-box)))
 
   (h/test "component renders when state is error and network is arbitrum"
-    (h/render [quo/confirmation-propgress
+    (h/render-with-theme-provider [quo/confirmation-propgress
                                    (get-test-data {:state   :error
-                               :network :arbitrum})])
+                                                   :network :arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :progress-box)))
 
   (h/test "component renders when state is pending and network is mainnet"
-    (h/render [quo/confirmation-propgress (get-test-data {})])
+    (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {})] theme)
     (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
 
   (h/test "component renders when state is sending and network is mainnet"
-    (h/render [quo/confirmation-propgress (get-test-data {:state :sending})])
+    (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {:state :sending})] theme)
     (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
 
   (h/test "component renders when state is confirmed and network is mainnet"
-    (h/render [quo/confirmation-propgress (get-test-data {:state :confirmed})])
+    (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {:state :confirmed})] theme)
     (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
 
   (h/test "component renders when state is finalising and network is mainnet"
-    (h/render [quo/confirmation-propgress (get-test-data {:state :finalising})])
+    (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {:state :finalising})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
 
   (h/test "component renders when state is finalized and network is mainnet"
-    (h/render [quo/confirmation-propgress (get-test-data {:state :finalized})])
+    (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {:state :finalized})] theme)
     (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
 
   (h/test "component renders when state is error and network is mainnet"
-    (h/render [quo/confirmation-propgress (get-test-data {:state :error})])
+    (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {:state :error})] theme)
     (h/is-truthy (h/get-by-label-text :mainnet-progress-box))))

src/quo/components/wallet/confirmation_progress/schema.cljs

@@ -0,0 +1,15 @@
+(ns quo.components.wallet.confirmation-progress.schema)
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map
+      [:total-box {:optional true} [:maybe :int]]
+      [:counter {:optional true} [:maybe :int]]
+      [:progress-value {:optional true} [:maybe :int]]
+      [:network {:optional true} [:enum :mainnet :optimism :arbitrum]]
+      [:state {:optional true} [:enum :pending :sending :confirmed :finalising :finalized :error]]
+      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
+      [:theme :schema.common/theme]]]]
+   :any])

src/quo/components/wallet/confirmation_progress/view.cljs

@@ -1,8 +1,10 @@
 (ns quo.components.wallet.confirmation-progress.view
-  (:require [quo.components.wallet.confirmation-progress.style :as style]
+  (:require [quo.components.wallet.confirmation-progress.schema :as component-schema]
+            [quo.components.wallet.confirmation-progress.style :as style]
             [quo.components.wallet.progress-bar.view :as progress-box]
             [quo.theme :as quo.theme]
-            [react-native.core :as rn]))
+            [react-native.core :as rn]
+            [schema.core :as schema]))
 
 (def ^:private max-progress 100)
 (def ^:private min-progress 0)
@@ -66,4 +68,6 @@
     (:arbitrum :optimism) [progress-boxes-sidenet props]
     nil))
 
-(def view (quo.theme/with-theme view-internal))
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal component-schema/?schema)))

src/quo/components/wallet/keypair/component_spec.cljs

@@ -3,6 +3,8 @@
     [quo.components.wallet.keypair.view :as keypair]
     [test-helpers.component :as h]))
 
+(def ^:private theme :light)
+
 (def accounts
   [{:account-props {:customization-color :turquoise
                     :size                32
@@ -23,41 +25,45 @@
 
 (h/describe "Wallet: Keypair"
   (h/test "Default keypair title renders"
-    (h/render [keypair/view
+    (h/render-with-theme-provider [keypair/view
                                    {:accounts            accounts
                                     :customization-color :blue
                                     :type                :default-keypair
                                     :stored              :on-device
                                     :action              :selector
-                :details             default-details}])
+                                    :details             default-details}]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :title)))
 
   (h/test "On device renders"
-    (h/render [keypair/view
+    (h/render-with-theme-provider [keypair/view
                                    {:accounts            accounts
                                     :customization-color :blue
                                     :type                :other
                                     :stored              :on-device
                                     :action              :selector
-                :details             other-details}])
+                                    :details             other-details}]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :details)))
 
   (h/test "Selector action renders"
-    (h/render [keypair/view
+    (h/render-with-theme-provider [keypair/view
                                    {:accounts            accounts
                                     :customization-color :blue
                                     :type                :other
                                     :stored              :on-keycard
                                     :action              :selector
-                :details             other-details}])
+                                    :details             other-details}]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :radio-on)))
 
   (h/test "Options action renders"
-    (h/render [keypair/view
+    (h/render-with-theme-provider [keypair/view
                                    {:accounts            accounts
                                     :customization-color :blue
                                     :type                :other
                                     :stored              :on-keycard
                                     :action              :options
-                :details             other-details}])
+                                    :details             other-details}]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :options-button))))

src/quo/components/wallet/transaction_progress/component_spec.cljs

@@ -1,200 +1,225 @@
 (ns quo.components.wallet.transaction-progress.component-spec
   (:require [quo.core :as quo]
-            [reagent.core :as reagent]
             [test-helpers.component :as h]))
 
+(def ^:private theme :light)
+
 (defn- get-test-data
   [{:keys [state network]
     :or   {state :pending network :mainnet}}]
   {:title               "Title"
    :tag-name            "Doodle"
-   :tag-number          "120"
+   :tag-number          120
    :network             network
    :customization-color :blue
    :networks            [{:network      :mainnet
                           :state        state
-                          :counter      (reagent/atom 0)
+                          :counter      0
                           :total-box    85
                           :progress     30
                           :epoch-number "123"}
                          {:network      :optimism
                           :state        state
-                          :progress     "50"
+                          :progress     50
                           :epoch-number "123"}
                          {:network      :arbitrum
                           :state        state
-                          :progress     "30"
+                          :progress     30
                           :epoch-number "123"}]
    :on-press            (fn []
                           (js/alert "Transaction progress item pressed"))})
 
 (h/describe "Transaction Progress"
   (h/test "component renders without props"
-    (h/render [quo/transaction-progress])
+    (h/render-with-theme-provider [quo/transaction-progress] theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is pending and network is mainnet"
-    (h/render [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:network :optimism-arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is sending and network is optimism-arbitrum"
-    (h/render [quo/transaction-progress
+    (h/render-with-theme-provider [quo/transaction-progress
                                    (get-test-data {:state   :sending
-                               :network :optimism-arbitrum})])
+                                                   :network :optimism-arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is confirmed and network is optimism-arbitrum"
-    (h/render [quo/transaction-progress
+    (h/render-with-theme-provider [quo/transaction-progress
                                    (get-test-data {:state   :confirmed
-                               :network :optimism-arbitrum})])
+                                                   :network :optimism-arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalising and network is optimism-arbitrum"
-    (h/render [quo/transaction-progress
+    (h/render-with-theme-provider [quo/transaction-progress
                                    (get-test-data {:state   :finalising
-                               :network :optimism-arbitrum})])
+                                                   :network :optimism-arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalized and network is optimism-arbitrum"
-    (h/render [quo/transaction-progress
+    (h/render-with-theme-provider [quo/transaction-progress
                                    (get-test-data {:state   :finalized
-                               :network :optimism-arbitrum})])
+                                                   :network :optimism-arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is error and network is optimism-arbitrum"
-    (h/render [quo/transaction-progress
+    (h/render-with-theme-provider [quo/transaction-progress
                                    (get-test-data {:state   :error
-                               :network :optimism-arbitrum})])
+                                                   :network :optimism-arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is sending and network is optimism"
-    (h/render [quo/transaction-progress
+    (h/render-with-theme-provider [quo/transaction-progress
                                    (get-test-data {:state   :sending
-                               :network :optimism})])
+                                                   :network :optimism})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is confirmed and network is optimism"
-    (h/render [quo/transaction-progress
+    (h/render-with-theme-provider [quo/transaction-progress
                                    (get-test-data {:state   :confirmed
-                               :network :optimism})])
+                                                   :network :optimism})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalising and network is optimism"
-    (h/render [quo/transaction-progress
+    (h/render-with-theme-provider [quo/transaction-progress
                                    (get-test-data {:state   :finalising
-                               :network :optimism})])
+                                                   :network :optimism})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalized and network is optimism"
-    (h/render [quo/transaction-progress
+    (h/render-with-theme-provider [quo/transaction-progress
                                    (get-test-data {:state   :finalized
-                               :network :optimism})])
+                                                   :network :optimism})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is error and network is optimism"
-    (h/render [quo/transaction-progress
+    (h/render-with-theme-provider [quo/transaction-progress
                                    (get-test-data {:state   :error
-                               :network :optimism})])
+                                                   :network :optimism})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is sending and network is arbitrum"
-    (h/render [quo/transaction-progress
+    (h/render-with-theme-provider [quo/transaction-progress
                                    (get-test-data {:state   :sending
-                               :network :arbitrum})])
+                                                   :network :arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is confirmed and network is arbitrum"
-    (h/render [quo/transaction-progress
+    (h/render-with-theme-provider [quo/transaction-progress
                                    (get-test-data {:state   :confirmed
-                               :network :arbitrum})])
+                                                   :network :arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalising and network is arbitrum"
-    (h/render [quo/transaction-progress
+    (h/render-with-theme-provider [quo/transaction-progress
                                    (get-test-data {:state   :finalising
-                               :network :arbitrum})])
+                                                   :network :arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalized and network is arbitrum"
-    (h/render [quo/transaction-progress
+    (h/render-with-theme-provider [quo/transaction-progress
                                    (get-test-data {:state   :finalized
-                               :network :arbitrum})])
+                                                   :network :arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is error and network is arbitrum"
-    (h/render [quo/transaction-progress
+    (h/render-with-theme-provider [quo/transaction-progress
                                    (get-test-data {:state   :error
-                               :network :arbitrum})])
+                                                   :network :arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is pending and network is mainnet"
-    (h/render [quo/transaction-progress (get-test-data {})])
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {})] theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is sending and network is mainnet"
-    (h/render [quo/transaction-progress (get-test-data {:state :sending})])
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:state :sending})] theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is confirmed and network is mainnet"
-    (h/render [quo/transaction-progress (get-test-data {:state :confirmed})])
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:state :confirmed})] theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalising and network is mainnet"
-    (h/render [quo/transaction-progress (get-test-data {:state :finalising})])
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:state :finalising})] theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalized and network is mainnet"
-    (h/render [quo/transaction-progress (get-test-data {:state :finalized})])
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:state :finalized})] theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is error and network is mainnet"
-    (h/render [quo/transaction-progress (get-test-data {:state :error})])
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:state :error})] theme)
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "mainnet progress box is visible network is mainnet"
-    (h/render [quo/transaction-progress (get-test-data {})])
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {})] theme)
     (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
 
   (h/test "arbitrum-optimism progress box is visible network is optimism-arbitrum"
-    (h/render [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:network :optimism-arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-all-by-label-text :progress-box)))
 
   (h/test "arbitrum progress box is visible network is arbitrum"
-    (h/render [quo/transaction-progress (get-test-data {:network :arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :arbitrum})] theme)
     (h/is-truthy (h/get-all-by-label-text :progress-box)))
 
   (h/test "optimism progress box is visible network is optimism"
-    (h/render [quo/transaction-progress (get-test-data {:network :optimism})])
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :optimism})] theme)
     (h/is-truthy (h/get-all-by-label-text :progress-box)))
 
   (h/test "title is visible network is optimism-arbitrum"
-    (h/render [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:network :optimism-arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title")))
 
   (h/test "title is visible network is mainnet"
-    (h/render [quo/transaction-progress (get-test-data {})])
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {})] theme)
     (h/is-truthy (h/get-by-text "Title")))
 
   (h/test "title is visible network is optimism"
-    (h/render [quo/transaction-progress (get-test-data {:network :optimism})])
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :optimism})] theme)
     (h/is-truthy (h/get-by-text "Title")))
 
   (h/test "title is visible network is arbitrum"
-    (h/render [quo/transaction-progress (get-test-data {:network :arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :arbitrum})] theme)
     (h/is-truthy (h/get-by-text "Title")))
 
   (h/test "context tag is visible network is optimism-arbitrum"
-    (h/render [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:network :optimism-arbitrum})]
+                                  theme)
     (h/is-truthy (h/get-by-label-text :context-tag)))
 
   (h/test "context tag is visible network is mainnet"
-    (h/render [quo/transaction-progress (get-test-data {})])
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {})] theme)
     (h/is-truthy (h/get-by-label-text :context-tag)))
 
   (h/test "context tag is visible network is optimism"
-    (h/render [quo/transaction-progress (get-test-data {:network :optimism})])
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :optimism})] theme)
     (h/is-truthy (h/get-by-label-text :context-tag)))
 
   (h/test "context tag is visible network is optimism"
-    (h/render [quo/transaction-progress (get-test-data {:network :arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :arbitrum})] theme)
-    (h/is-truthy (h/get-by-label-text :context-tag))))
+    (h/is-truthy (h/get-by-label-text :context-tag)))
+)

src/status_im/contexts/preview/quo/wallet/confirmation_progress.cljs

@@ -6,7 +6,7 @@
     [status-im.contexts.preview.quo.preview :as preview]))
 
 (def descriptor
-  [{:type :text
+  [{:type :number
     :key  :progress-value}
    {:type    :select
     :key     :network
@@ -78,7 +78,7 @@
   []
   (let [state (reagent/atom
                {:total-box           total-box
-                :progress-value      "10"
+                :progress-value      10
                 :network             :mainnet
                 :state               :pending
                 :customization-color :blue})]

src/status_im/contexts/preview/quo/wallet/transaction_progress.cljs

@@ -19,9 +19,9 @@
     :key  :epoch-number-arbitrum}
    {:type :text
     :key  :tag-number}
-   {:type :text
+   {:type :number
     :key  :optimism-progress-percentage}
-   {:type :text
+   {:type :number
     :key  :arbitrum-progress-percentage}
    {:type    :select
     :key     :network
@@ -142,8 +142,8 @@
                 :epoch-number-mainnet         "181,329"
                 :epoch-number-optimism        "181,329"
                 :epoch-number-arbitrum        "181,329"
-                :optimism-progress-percentage "10"
+                :optimism-progress-percentage 10
-                :arbitrum-progress-percentage "10"
+                :arbitrum-progress-percentage 10
                 :network                      :mainnet
                 :state-mainnet                :pending
                 :state-arbitrum               :pending

src/status_im/contexts/wallet/home/view.cljs

@@ -60,7 +60,7 @@
            :data                              cards
            :horizontal                        true
            :separator                         [rn/view {:style style/separator}]
-           :render-fn                         quo/account-card
+           :render-fn                         (fn [item] [quo/account-card item])
            :shows-horizontal-scroll-indicator false}]
          [quo/tabs
           {:style          style/tabs