Enable feature flag

shadow-cljs.edn

@@ -45,9 +45,6 @@
    ;; To match the folder created by Nix build of JSBundle.
    :output-dir "result"
    :init-fn status-im.core/init
-   :build-hooks [(status-im.setup.build-hooks.worklets/transform-output)
-                 (status-im.setup.build-hooks.worklets/optimize-start)
-                 (status-im.setup.build-hooks.worklets/optimize-output)]
    ;; When false, the Shadow-CLJS watcher won't automatically refresh
    ;; the target files (a.k.a hot reload). When false, you can manually
    ;; reload by calling `shadow.cljs.devtools.api/watch-compile-all!`.

src/quo/components/buttons/button/properties.cljs

@@ -4,15 +4,11 @@
 
 (def backgrounds #{:photo :blur})
 
-;; Note: We hardcode the :light theme for the background-color and apply an overlay when necessary, such
-;; as for dark themes and pressed states. This approach is taken because, for communities, we only have
-;; one color available, which is the light theme version.
-;; For more information, see the related issue: https://github.com/status-im/status-mobile/issues/16396
 (defn- custom-color-type
-  [customization-color icon-only?]
+  [customization-color icon-only? theme]
   {:icon-color                  colors/white-opa-70
    :label-color                 colors/white
-   :background-color            (colors/resolve-color customization-color :light)
+   :background-color            (colors/resolve-color customization-color theme)
    :border-radius               (when icon-only? 24)
    :overlay-customization-color customization-color})
 
@@ -91,7 +87,8 @@
                                  type)]
     (cond
       (contains? #{:primary :positive :danger} type) (custom-color-type customization-color
-                                                                        icon-only?)
+                                                                        icon-only?
+                                                                        theme)
       (and (= :photo background) (= type :grey))     (grey-photo theme pressed?)
       (and (= :blur background) (= type :grey))      (grey-blur theme pressed?)
       (and (= :blur background) (= type :outline))   (outline-blur theme pressed?)

src/quo/components/tags/collectible_tag/style.cljs

@@ -1,50 +0,0 @@
-(ns quo.components.tags.collectible-tag.style
-  (:require
-    [quo.foundations.colors :as colors]))
-
-(defn container
-  [size options blur? theme]
-  (let [hold? (= options :hold)]
-    (merge {:background-color (if blur?
-                                (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
-                                (colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
-            :flex-direction   :row
-            :align-items      :center
-            :padding-left     2
-            :border-width     (if hold? 1 0)
-            :border-radius    0
-            :border-color     (colors/resolve-color :success theme)}
-           (condp = size
-             :size-24 {:height        (if hold? 26 24)
-                       :padding-right 10
-                       :border-radius 8}
-             :size-32 {:height        (if hold? 34 32)
-                       :padding-right 12
-                       :border-radius 10}))))
-
-(defn options-icon
-  [size]
-  (assoc
-   (condp = size
-     :size-24 {:right -8
-               :top   -8}
-     :size-32 {:right -6
-               :top   -6})
-   :position
-   :absolute))
-
-(defn collectible-img
-  [size]
-  (condp = size
-    :size-24 {:width         20
-              :height        20
-              :margin-right  6
-              :border-radius 6}
-    :size-32 {:width         28
-              :height        28
-              :margin-right  8
-              :border-radius 8}))
-
-(defn label
-  [theme]
-  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})

src/quo/components/tags/collectible_tag/view.cljs

@@ -1,70 +0,0 @@
-(ns quo.components.tags.collectible-tag.view
-  (:require
-    [quo.components.icon :as icons]
-    [quo.components.markdown.text :as text]
-    [quo.components.tags.collectible-tag.style :as style]
-    [quo.theme]
-    [react-native.core :as rn]
-    [react-native.hole-view :as hole-view]
-    [schema.core :as schema]))
-
-(def ?schema
-  [:=>
-   [:catn
-    [:props
-     [:map {:closed true}
-      [:options {:optional true} [:maybe [:enum false :add :hold]]]
-      [:size {:optional true} [:enum :size-24 :size-32]]
-      [:blur? {:optional true} :boolean]
-      [:theme :schema.common/theme]
-      [:collectible-img-src [:or :int :string]]
-      [:collectible-name :string]
-      [:collectible-id :string]
-      [:container-width :number]
-      [:on-layout {:optional true} [:maybe fn?]]]]]
-   :any])
-
-(defn- view-internal
-  []
-  (fn [{:keys [options size blur? theme collectible-img-src collectible-name collectible-id
-               container-width on-layout]
-        :or   {size :size-24}}]
-    [rn/view
-     {:on-layout on-layout}
-     [hole-view/hole-view
-      {:holes (if options
-                [{:x            (- container-width
-                                   (case size
-                                     :size-24 10
-                                     :size-32 12
-                                     nil))
-                  :y            (case size
-                                  :size-24 -6
-                                  :size-32 -4
-                                  nil)
-                  :width        16
-                  :height       16
-                  :borderRadius 8}]
-                [])}
-      [rn/view {:style (style/container size options blur? theme)}
-       [rn/image {:style (style/collectible-img size) :source collectible-img-src}]
-       [text/text
-        {:size   :paragraph-2
-         :weight :medium
-         :style  (style/label theme)}
-        collectible-name]
-       [text/text
-        {:size        :paragraph-2
-         :weight      :medium
-         :margin-left 5
-         :style       (style/label theme)}
-        collectible-id]]]
-     (when options
-       [rn/view {:style (style/options-icon size)}
-        [icons/icon (if (= options :hold) :i/hold :i/add-token)
-         {:size     20
-          :no-color true}]])]))
-
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal ?schema)))

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

@@ -1,43 +0,0 @@
-(ns quo.components.wallet.amount-input.component-spec
-  (:require
-    [oops.core :as oops]
-    [quo.components.wallet.amount-input.view :as amount-input]
-    [quo.foundations.colors :as colors]
-    [test-helpers.component :as h]))
-
-(defn- render
-  [component]
-  (h/render-with-theme-provider component :light))
-
-(h/describe "Amount input component"
-  (h/test "Renders with default value"
-    (let [text-expected 0]
-      (render [amount-input/view {:init-value text-expected}])
-      (h/is-truthy (h/query-by-label-text :amount-input))
-      (h/is-equal (oops/oget (h/get-by-label-text :amount-input) "props" "value")
-                  (str text-expected))))
-
-  (h/test "When the value = minimum dec button is disabled"
-    (render [amount-input/view
-             {:init-value 0
-              :min-value  0}])
-    (h/is-truthy
-     (oops/oget (h/get-by-label-text :amount-input-dec-button) "props" "accessibilityState" "disabled")))
-
-  (h/test "When the value = maximum inc button is disabled"
-    (render [amount-input/view
-             {:init-value 100
-              :max-value  100}])
-    (h/is-truthy
-     (oops/oget (h/get-by-label-text :amount-input-inc-button) "props" "accessibilityState" "disabled")))
-
-  (h/test "Renders the error state"
-    (render [amount-input/view {:status :error}])
-    (h/is-equal (colors/resolve-color :danger :light)
-                (oops/oget (h/get-by-label-text :amount-input) "props" "style" "color")))
-
-  (h/test "on-change-text function is fired"
-    (let [on-change-text (h/mock-fn)]
-      (render [amount-input/view {:on-change-text on-change-text}])
-      (h/fire-event :change-text (h/get-by-label-text :amount-input) "100")
-      (h/was-called on-change-text))))

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

@@ -1,21 +0,0 @@
-(ns quo.components.wallet.amount-input.schema)
-
-(def return-key-types
-  [:enum :done :go :next :search :send :none :previous :default
-   :emergency-call :google :join :route :yahoo])
-
-(def ?schema
-  [:=>
-   [:catn
-    [:props
-     [:map {:closed true}
-      [:status {:optional true} [:maybe [:enum :default :error]]]
-      [:theme :schema.common/theme]
-      [:on-change-text {:optional true} [:maybe fn?]]
-      [:container-style {:optional true} [:maybe :map]]
-      [:auto-focus? {:optional true} [:maybe :boolean]]
-      [:min-value {:optional true} [:maybe :int]]
-      [:max-value {:optional true} [:maybe :int]]
-      [:return-key-type {:optional true} [:maybe return-key-types]]
-      [:init-value {:optional true} [:maybe :int]]]]]
-   :any])

src/quo/components/wallet/amount_input/style.cljs

@@ -1,17 +0,0 @@
-(ns quo.components.wallet.amount-input.style
-  (:require
-    [quo.foundations.colors :as colors]))
-
-(def container
-  {:flex-direction  :row
-   :justify-content :center
-   :align-items     :center})
-
-(def input-container {:flex 1})
-
-(defn input-text
-  [theme type]
-  {:padding 0
-   :color   (if (= type :error)
-              (colors/resolve-color :danger theme)
-              (colors/theme-colors colors/neutral-100 colors/white theme))})

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

@@ -1,81 +0,0 @@
-(ns quo.components.wallet.amount-input.view
-  (:require
-    [quo.components.buttons.button.view :as button]
-    [quo.components.markdown.text :as text]
-    [quo.components.wallet.amount-input.schema :as amount-input.schema]
-    [quo.components.wallet.amount-input.style :as style]
-    [quo.theme :as quo.theme]
-    [react-native.core :as rn]
-    [reagent.core :as reagent]
-    [schema.core :as schema]))
-
-(defn- amount-button
-  [{:keys [theme accessibility-label disabled? icon on-press]}]
-  [button/button
-   {:icon-only?          true
-    :theme               theme
-    :disabled?           disabled?
-    :type                :outline
-    :accessibility-label accessibility-label
-    :size                32
-    :on-press            on-press}
-   icon])
-
-(defn- process-amount
-  [input-value min-value max-value]
-  (let [parsed-input-value (parse-double input-value)]
-    (cond
-      (nil? parsed-input-value)  min-value
-      (>= input-value max-value) max-value
-      (<= input-value min-value) min-value
-      :else                      parsed-input-value)))
-
-(defn- view-internal
-  [{:keys [init-value]}]
-  (let [init-value   (or init-value 0)
-        value        (reagent/atom init-value)
-        on-dec-press #(swap! value dec)
-        on-inc-press #(swap! value inc)]
-    (fn [{:keys [theme status min-value max-value auto-focus?
-                 return-key-type container-style on-change-text]}]
-      (let [min-value (or min-value 0)
-            max-value (or max-value 999999999)]
-        [rn/view
-         {:style (merge style/container container-style)}
-         [amount-button
-          {:theme               theme
-           :accessibility-label :amount-input-dec-button
-           :icon                :i/remove
-           :on-press            on-dec-press
-           :disabled?           (>= min-value @value)}]
-         [rn/view {:style style/input-container}
-          [rn/text-input
-           {:style
-            (text/text-style
-             {:size   :heading-1
-              :weight :semi-bold
-              :align  :center
-              :style  (style/input-text theme (or status :default))})
-            :accessibility-label :amount-input
-            :editable true
-            :auto-focus (or auto-focus? false)
-            :value (str @value)
-            :keyboard-appearance (quo.theme/theme-value :light :dark theme)
-            :return-key-type (or return-key-type :done)
-            :input-mode :numeric
-            :on-change-text (fn [input-value]
-                              (let [processed-amount (process-amount input-value min-value max-value)]
-                                (reset! value processed-amount)
-                                (when on-change-text
-                                  (on-change-text processed-amount))
-                                (reagent/flush)))}]] ; Fixes the input flickering issue when typing.
-         [amount-button
-          {:theme               theme
-           :icon                :i/add
-           :accessibility-label :amount-input-inc-button
-           :on-press            on-inc-press
-           :disabled?           (>= @value max-value)}]]))))
-
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal amount-input.schema/?schema)))

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

@@ -2,6 +2,7 @@
   (:require [quo.core :as quo]
             [test-helpers.component :as h]))
 
+(def ^:private theme :light)
 
 (defn- get-test-data
   [{:keys [state network]
@@ -17,99 +18,94 @@
   (h/test "component renders when state is sending and network is optimism"
     (h/render-with-theme-provider [quo/confirmation-propgress
                                    (get-test-data {:state   :sending
-                                                   :network :optimism})])
-    (h/is-truthy (h/get-by-label-text :progress-box))))
+                                                   :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-with-theme-provider
-   [quo/confirmation-propgress
-    (get-test-data {:state   :confirmed
-                    :network :optimism})])
-  (h/is-truthy (h/get-by-label-text :progress-box)))
+  (h/test "component renders when state is confirmed and network is optimism"
+    (h/render-with-theme-provider [quo/confirmation-propgress
+                                   (get-test-data {:state   :confirmed
+                                                   :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-with-theme-provider
-   [quo/confirmation-propgress
-    (get-test-data {:state   :finalising
-                    :network :optimism})])
-  (h/is-truthy (h/get-by-label-text :progress-box)))
+  (h/test "component renders when state is finalising and network is optimism"
+    (h/render-with-theme-provider [quo/confirmation-propgress
+                                   (get-test-data {:state   :finalising
+                                                   :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-with-theme-provider
-   [quo/confirmation-propgress
-    (get-test-data {:state   :finalized
-                    :network :optimism})])
-  (h/is-truthy (h/get-by-label-text :progress-box)))
+  (h/test "component renders when state is finalized and network is optimism"
+    (h/render-with-theme-provider [quo/confirmation-propgress
+                                   (get-test-data {:state   :finalized
+                                                   :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-with-theme-provider
-   [quo/confirmation-propgress
-    (get-test-data {:state   :error
-                    :network :optimism})])
-  (h/is-truthy (h/get-by-label-text :progress-box)))
+  (h/test "component renders when state is error and network is optimism"
+    (h/render-with-theme-provider [quo/confirmation-propgress
+                                   (get-test-data {:state   :error
+                                                   :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-with-theme-provider
-   [quo/confirmation-propgress
-    (get-test-data {:state   :sending
-                    :network :arbitrum})])
-  (h/is-truthy (h/get-by-label-text :progress-box)))
+  (h/test "component renders when state is sending and network is arbitrum"
+    (h/render-with-theme-provider [quo/confirmation-propgress
+                                   (get-test-data {:state   :sending
+                                                   :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-with-theme-provider
-   [quo/confirmation-propgress
-    (get-test-data {:state   :confirmed
-                    :network :arbitrum})])
-  (h/is-truthy (h/get-by-label-text :progress-box)))
+  (h/test "component renders when state is confirmed and network is arbitrum"
+    (h/render-with-theme-provider [quo/confirmation-propgress
+                                   (get-test-data {:state   :confirmed
+                                                   :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-with-theme-provider
-   [quo/confirmation-propgress
-    (get-test-data {:state   :finalising
-                    :network :arbitrum})])
-  (h/is-truthy (h/get-by-label-text :progress-box)))
+  (h/test "component renders when state is finalising and network is arbitrum"
+    (h/render-with-theme-provider [quo/confirmation-propgress
+                                   (get-test-data {:state   :finalising
+                                                   :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-with-theme-provider
-   [quo/confirmation-propgress
-    (get-test-data {:state   :finalized
-                    :network :arbitrum})])
-  (h/is-truthy (h/get-by-label-text :progress-box)))
+  (h/test "component renders when state is finalized and network is arbitrum"
+    (h/render-with-theme-provider [quo/confirmation-propgress
+                                   (get-test-data {:state   :finalized
+                                                   :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-with-theme-provider
-   [quo/confirmation-propgress
-    (get-test-data {:state   :error
-                    :network :arbitrum})])
-  (h/is-truthy (h/get-by-label-text :progress-box)))
+  (h/test "component renders when state is error and network is arbitrum"
+    (h/render-with-theme-provider [quo/confirmation-propgress
+                                   (get-test-data {:state   :error
+                                                   :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-with-theme-provider
-   [quo/confirmation-propgress (get-test-data {})])
-  (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
+  (h/test "component renders when state is pending and network is mainnet"
+    (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-with-theme-provider
-   [quo/confirmation-propgress (get-test-data {:state :sending})])
-  (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-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-with-theme-provider
-   [quo/confirmation-propgress (get-test-data {:state :confirmed})])
-  (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-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-with-theme-provider
-   [quo/confirmation-propgress (get-test-data {:state :finalising})])
-  (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-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-with-theme-provider
-   [quo/confirmation-propgress (get-test-data {:state :finalized})])
-  (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-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-with-theme-provider
-   [quo/confirmation-propgress
-    (get-test-data {:state :error})])
-  (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-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/network_amount/component_spec.cljs

@@ -5,8 +5,7 @@
 
 (h/describe "Wallet: Network Amount"
   (h/test "Amount renders"
-    (h/render-with-theme-provider
-     [network-amount/view
-      {:amount "5.123"
-       :token  :eth}])
+    (h/render [network-amount/view
+               {:amount "5.123"
+                :token  :eth}])
     (h/is-truthy (h/get-by-text "5.123 ETH"))))

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

@@ -5,18 +5,7 @@
     [quo.components.utilities.token.view :as token]
     [quo.components.wallet.network-amount.style :as style]
     [quo.theme :as quo.theme]
-    [react-native.core :as rn]
-    [schema.core :as schema]))
-
-(def ?schema
-  [:=>
-   [:catn
-    [:props
-     [:map {:closed true}
-      [:amount {:optional true} [:maybe :string]]
-      [:token {:optional true} [:or :keyword :string]]
-      [:theme :schema.common/theme]]]]
-   :any])
+    [react-native.core :as rn]))
 
 (defn- view-internal
   [{:keys [amount token theme]}]
@@ -30,4 +19,4 @@
    [rn/view
     {:style (style/divider theme)}]])
 
-(def view (quo.theme/with-theme (schema/instrument #'view-internal ?schema)))
+(def view (quo.theme/with-theme view-internal))

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

@@ -4,37 +4,37 @@
     [test-helpers.component :as h]))
 
 (h/describe "Wallet: Network Bridge"
-  (h/test "Amount render-with-theme-providers"
-    (h/render-with-theme-provider [network-bridge/view
-                                   {:amount  "50 SNT"
-                                    :network :ethereum
-                                    :status  :default}])
+  (h/test "Amount renders"
+    (h/render [network-bridge/view
+               {:amount  "50 SNT"
+                :network :ethereum
+                :status  :default}])
     (h/is-truthy (h/get-by-text "50 SNT")))
 
-  (h/test "Network label render"
-    (h/render-with-theme-provider [network-bridge/view
-                                   {:amount  "50 SNT"
-                                    :network :optimism
-                                    :status  :default}])
+  (h/test "Network label renders"
+    (h/render [network-bridge/view
+               {:amount  "50 SNT"
+                :network :optimism
+                :status  :default}])
     (h/is-truthy (h/get-by-text "Optimism")))
 
   (h/test "Locked state"
-    (h/render-with-theme-provider [network-bridge/view
-                                   {:amount  "50 SNT"
-                                    :network :optimism
-                                    :status  :locked}])
+    (h/render [network-bridge/view
+               {:amount  "50 SNT"
+                :network :optimism
+                :status  :locked}])
     (h/is-truthy (h/get-by-label-text :lock)))
 
   (h/test "Loading state"
-    (h/render-with-theme-provider [network-bridge/view
-                                   {:amount  "50 SNT"
-                                    :network :optimism
-                                    :status  :loading}])
+    (h/render [network-bridge/view
+               {:amount  "50 SNT"
+                :network :optimism
+                :status  :loading}])
     (h/is-truthy (h/get-by-label-text :loading)))
 
   (h/test "Disabled state"
-    (h/render-with-theme-provider [network-bridge/view
-                                   {:amount  "50 SNT"
-                                    :network :optimism
-                                    :status  :disabled}])
+    (h/render [network-bridge/view
+               {:amount  "50 SNT"
+                :network :optimism
+                :status  :disabled}])
     (h/has-style (h/get-by-label-text :container) {:opacity 0.3})))

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

@@ -7,8 +7,7 @@
     [quo.foundations.colors :as colors]
     [quo.foundations.resources :as resources]
     [quo.theme :as quo.theme]
-    [react-native.core :as rn]
-    [schema.core :as schema]))
+    [react-native.core :as rn]))
 
 (defn network-bridge-add
   [{:keys [network state theme container-style on-press]}]
@@ -25,22 +24,6 @@
         (= network :ethereum) "Mainnet"
         :else                 (string/capitalize (name network))))
 
-(def ^:private ?network-bridge-status
-  [:enum :add :loading :locked :disabled :default])
-
-(def ?schema
-  [:=>
-   [:catn
-    [:props
-     [:map
-      [:theme :schema.common/theme]
-      [:network {:optional true} [:maybe :keyword]]
-      [:status {:optional true} [:maybe ?network-bridge-status]]
-      [:amount {:optional true} [:maybe :string]]
-      [:container-style {:optional true} [:maybe :map]]
-      [:on-press {:optional true} [:maybe fn?]]]]]
-   :any])
-
 (defn view-internal
   [{:keys [theme network status amount container-style on-press] :as args}]
   (if (= status :add)
@@ -79,6 +62,4 @@
         :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
        (network->text network)]]]))
 
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal ?schema)))
+(def view (quo.theme/with-theme view-internal))

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

@@ -1,7 +1,6 @@
 (ns quo.components.wallet.network-routing.component-spec
   (:require [oops.core :as oops]
             [quo.components.wallet.network-routing.view :as network-routing]
-            quo.theme
             [reagent.core :as reagent]
             [test-helpers.component :as h]))
 
@@ -12,18 +11,17 @@
                        :requesting-data?   false
                        :on-amount-selected (fn [_new-amount _network-idx] nil)}]
     (h/test "Renders Default"
-      (h/render-with-theme-provider [network-routing/view default-props])
+      (h/render [network-routing/view default-props])
       (h/is-truthy (h/get-by-label-text :network-routing)))
 
     (h/test "Renders bars inside"
-      (let [component   (h/render-with-theme-provider [network-routing/view default-props])
+      (let [component   (h/render [network-routing/view default-props])
             rerender-fn #((oops/oget component "rerender") (reagent/as-element %))
             component   (h/get-by-label-text :network-routing)]
         ;; Fires on-layout callback since the total width is required
         (h/fire-event :layout component #js {:nativeEvent #js {:layout #js {:width 1000}}})
         ;; Update props to trigger rerender, otherwise it won't be updated
-        (rerender-fn [quo.theme/provider {:theme :light}
-                      [network-routing/view (assoc default-props :requesting-data? true)]])
+        (rerender-fn [network-routing/view (assoc default-props :requesting-data? true)])
         ;; Check number of networks rendered
         (->> (js->clj (h/query-all-by-label-text :network-routing-bar))
              (count)

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

@@ -8,7 +8,6 @@
     [react-native.gesture :as gesture]
     [react-native.reanimated :as reanimated]
     [reagent.core :as reagent]
-    [schema.core :as schema]
     [utils.number]))
 
 (def ^:private timeouts (atom {}))
@@ -173,22 +172,6 @@
             [rn/view {:style (style/max-limit-bar-background network-name)}]
             [dashed-line network-name]])]))))
 
-(def ?schema
-  [:=>
-   [:catn
-    [:props
-     [:map
-      [:networks {:optional true}
-       [:maybe
-        [:sequential
-         [:map
-          [:amount :int]
-          [:max-amount :int]
-          [:network-name [:or :string :keyword]]]]]]
-      [:container-style {:optional true} [:maybe :map]]
-      [:theme :schema.common/theme]]]]
-   :any])
-
 (defn view-internal
   [{:keys [networks container-style theme] :as params}]
   (reagent/with-let [total-width (reagent/atom nil)]
@@ -203,6 +186,4 @@
      (doseq [[_ living-timeout] @timeouts]
        (js/clearTimeout living-timeout)))))
 
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal ?schema)))
+(def view (quo.theme/with-theme view-internal))

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

@@ -2,19 +2,7 @@
   (:require
     [quo.components.wallet.progress-bar.style :as style]
     [quo.theme :as quo.theme]
-    [react-native.core :as rn]
-    [schema.core :as schema]))
-
-(def ?schema
-  [:=>
-   [:catn
-    [:props
-     [:map
-      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
-      [:theme :schema.common/theme]
-      [:progressed-value {:optional true} [:maybe [:or :string :int]]]
-      [:full-width? {:optional true} [:maybe :boolean]]]]]
-   :any])
+    [react-native.core :as rn]))
 
 (defn- view-internal
   [{:keys [full-width?] :as props}]
@@ -24,6 +12,4 @@
    (when full-width?
      [rn/view {:style (style/progressed-bar props)}])])
 
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal ?schema)))
+(def view (quo.theme/with-theme view-internal))

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

@@ -13,49 +13,48 @@
 
 (h/describe "Wallet: Summary Info"
   (h/test "Type of `status-account` title renders"
-    (h/render-with-theme-provider [summary-info/view
-                                   {:type          :status-account
-                                    :networks?     true
-                                    :values        {:ethereum 150
-                                                    :optimism 50
-                                                    :arbitrum 25}
-                                    :account-props status-account-props}])
+    (h/render [summary-info/view
+               {:type          :status-account
+                :networks?     true
+                :values        {:ethereum 150
+                                :optimism 50
+                                :arbitrum 25}
+                :account-props status-account-props}])
     (h/is-truthy (h/get-by-text "Collectibles vault")))
 
   (h/test "Type of `user` title renders"
-    (h/render-with-theme-provider [summary-info/view
-                                   {:type          :user
-                                    :networks?     true
-                                    :values        {:ethereum 150
-                                                    :optimism 50
-                                                    :arbitrum 25}
-                                    :account-props {:full-name           "M L"
-                                                    :status-indicator?   false
-                                                    :size                :small
-                                                    :customization-color :blue
-                                                    :name                "Mark Libot"
-                                                    :address             "0x0ah...78b"
-                                                    :status-account      (merge status-account-props
-                                                                                {:size 16})}}])
+    (h/render [summary-info/view
+               {:type          :user
+                :networks?     true
+                :values        {:ethereum 150
+                                :optimism 50
+                                :arbitrum 25}
+                :account-props {:full-name           "M L"
+                                :status-indicator?   false
+                                :size                :small
+                                :customization-color :blue
+                                :name                "Mark Libot"
+                                :address             "0x0ah...78b"
+                                :status-account      (merge status-account-props {:size 16})}}])
     (h/is-truthy (h/get-by-text "Mark Libot"))
     (h/is-truthy (h/get-by-text "Collectibles vault")))
 
   (h/test "Networks true render"
-    (h/render-with-theme-provider [summary-info/view
-                                   {:type          :status-account
-                                    :networks?     true
-                                    :values        {:ethereum 150
-                                                    :optimism 50
-                                                    :arbitrum 25}
-                                    :account-props status-account-props}])
+    (h/render [summary-info/view
+               {:type          :status-account
+                :networks?     true
+                :values        {:ethereum 150
+                                :optimism 50
+                                :arbitrum 25}
+                :account-props status-account-props}])
     (h/is-truthy (h/get-by-label-text :networks)))
 
   (h/test "Networks false render"
-    (h/render-with-theme-provider [summary-info/view
-                                   {:type          :status-account
-                                    :networks?     false
-                                    :values        {:ethereum 150
-                                                    :optimism 50
-                                                    :arbitrum 25}
-                                    :account-props status-account-props}])
+    (h/render [summary-info/view
+               {:type          :status-account
+                :networks?     false
+                :values        {:ethereum 150
+                                :optimism 50
+                                :arbitrum 25}
+                :account-props status-account-props}])
     (h/is-null (h/query-by-label-text :networks))))

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

@@ -8,8 +8,7 @@
     [quo.foundations.colors :as colors]
     [quo.foundations.resources :as resources]
     [quo.theme :as quo.theme]
-    [react-native.core :as rn]
-    [schema.core :as schema]))
+    [react-native.core :as rn]))
 
 (defn- network-amount
   [{:keys [network amount divider? theme]}]
@@ -52,18 +51,6 @@
          :amount  (str (:amount arbitrum) " " (or (:token-symbol arbitrum) "ARB"))
          :theme   theme}])]))
 
-(def ?schema
-  [:=>
-   [:catn
-    [:props
-     [:map
-      [:theme :schema.common/theme]
-      [:type [:enum :status-account :saved-account :account :user]]
-      [:account-props {:optional true} [:maybe :map]]
-      [:networks? {:optional true} [:maybe :boolean]]
-      [:values {:optional true} [:maybe :map]]]]]
-   :any])
-
 (defn- view-internal
   [{:keys [theme type account-props networks? values]}]
   [rn/view
@@ -104,6 +91,4 @@
        {:style (style/line-divider theme)}]
       [networks values theme]])])
 
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal ?schema)))
+(def view (quo.theme/with-theme view-internal))

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

@@ -2,6 +2,8 @@
   (:require [quo.core :as quo]
             [test-helpers.component :as h]))
 
+(def ^:private theme :light)
+
 (defn- get-test-data
   [{:keys [state network]
     :or   {state :pending network :mainnet}}]
@@ -29,206 +31,195 @@
 
 (h/describe "Transaction Progress"
   (h/test "component renders without props"
-    (h/render-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [quo/transaction-progress
-      (get-test-data {:state   :sending
-                      :network :optimism-arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:state   :sending
+                                                   :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-with-theme-provider
-     [quo/transaction-progress
-      (get-test-data {:state   :confirmed
-                      :network :optimism-arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:state   :confirmed
+                                                   :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-with-theme-provider
-     [quo/transaction-progress
-      (get-test-data {:state   :finalising
-                      :network :optimism-arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:state   :finalising
+                                                   :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-with-theme-provider
-     [quo/transaction-progress
-      (get-test-data {:state   :finalized
-                      :network :optimism-arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:state   :finalized
+                                                   :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-with-theme-provider
-     [quo/transaction-progress
-      (get-test-data {:state   :error
-                      :network :optimism-arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:state   :error
+                                                   :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-with-theme-provider
-     [quo/transaction-progress
-      (get-test-data {:state   :sending
-                      :network :optimism})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:state   :sending
+                                                   :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-with-theme-provider
-     [quo/transaction-progress
-      (get-test-data {:state   :confirmed
-                      :network :optimism})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:state   :confirmed
+                                                   :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-with-theme-provider
-     [quo/transaction-progress
-      (get-test-data {:state   :finalising
-                      :network :optimism})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:state   :finalising
+                                                   :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-with-theme-provider
-     [quo/transaction-progress
-      (get-test-data {:state   :finalized
-                      :network :optimism})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:state   :finalized
+                                                   :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-with-theme-provider
-     [quo/transaction-progress
-      (get-test-data {:state   :error
-                      :network :optimism})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:state   :error
+                                                   :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-with-theme-provider
-     [quo/transaction-progress
-      (get-test-data {:state   :sending
-                      :network :arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:state   :sending
+                                                   :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-with-theme-provider
-     [quo/transaction-progress
-      (get-test-data {:state   :confirmed
-                      :network :arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:state   :confirmed
+                                                   :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-with-theme-provider
-     [quo/transaction-progress
-      (get-test-data {:state   :finalising
-                      :network :arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:state   :finalising
+                                                   :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-with-theme-provider
-     [quo/transaction-progress
-      (get-test-data {:state   :finalized
-                      :network :arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:state   :finalized
+                                                   :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-with-theme-provider
-     [quo/transaction-progress
-      (get-test-data {:state   :error
-                      :network :arbitrum})])
+    (h/render-with-theme-provider [quo/transaction-progress
+                                   (get-test-data {:state   :error
+                                                   :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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [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-with-theme-provider
-     [quo/transaction-progress (get-test-data {:network :arbitrum})])
-    (h/is-truthy (h/get-by-label-text :context-tag))))
+    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :arbitrum})] theme)
+    (h/is-truthy (h/get-by-label-text :context-tag)))
+)

src/quo/core.cljs

@@ -135,7 +135,6 @@
     quo.components.tabs.account-selector
     quo.components.tabs.segmented-tab
     quo.components.tabs.tabs.view
-    quo.components.tags.collectible-tag.view
     quo.components.tags.context-tag.view
     quo.components.tags.network-tags.view
     quo.components.tags.number-tag.view
@@ -157,7 +156,6 @@
     quo.components.wallet.account-overview.view
     quo.components.wallet.account-permissions.view
     quo.components.wallet.address-text.view
-    quo.components.wallet.amount-input.view
     quo.components.wallet.confirmation-progress.view
     quo.components.wallet.keypair.view
     quo.components.wallet.network-amount.view
@@ -389,7 +387,6 @@
 (def account-selector quo.components.tabs.account-selector/account-selector)
 
 ;;;; Tags
-(def collectible-tag quo.components.tags.collectible-tag.view/view)
 (def context-tag quo.components.tags.context-tag.view/view)
 (def network-tags quo.components.tags.network-tags.view/view)
 (def number-tag quo.components.tags.number-tag.view/view)
@@ -417,7 +414,6 @@
 (def account-overview quo.components.wallet.account-overview.view/view)
 (def account-permissions quo.components.wallet.account-permissions.view/view)
 (def address-text quo.components.wallet.address-text.view/view)
-(def amount-input quo.components.wallet.amount-input.view/view)
 (def confirmation-propgress quo.components.wallet.confirmation-progress.view/view)
 (def keypair quo.components.wallet.keypair.view/view)
 (def network-amount quo.components.wallet.network-amount.view/view)

src/quo/core_spec.cljs

@@ -90,7 +90,6 @@
     quo.components.wallet.account-origin.component-spec
     quo.components.wallet.account-overview.component-spec
     quo.components.wallet.account-permissions.component-spec
-    quo.components.wallet.amount-input.component-spec
     quo.components.wallet.confirmation-progress.component-spec
     quo.components.wallet.keypair.component-spec
     quo.components.wallet.network-amount.component-spec

src/react_native/reanimated.cljs

@@ -20,8 +20,7 @@
                      LinearTransition
                      enableLayoutAnimations
                      useAnimatedScrollHandler
-                     runOnJS)
-     :as reanimated*]
+                     runOnJS)]
     ["react-native-redash" :refer (withPause)]
     [oops.core :as oops]
     [react-native.flat-list :as rn-flat-list]
@@ -114,8 +113,6 @@
   (when (and anim (some? v))
     (set! (.-value anim) v)))
 
-(def interpolate* reanimated*/interpolate)
-
 (defn interpolate
   ([shared-value input-range output-range]
    (interpolate shared-value input-range output-range nil))

src/status_im/config.cljs

@@ -167,5 +167,5 @@
 
 (def default-kdf-iterations 3200)
 
-(def community-accounts-selection-enabled? (enabled? (get-config :ACCOUNT_SELECTION_ENABLED "0")))
+(def community-accounts-selection-enabled? true)
 (def fetch-messages-enabled? (enabled? (get-config :FETCH_MESSAGES_ENABLED "1")))

src/status_im/contexts/chat/messenger/messages/list/view.cljs

@@ -151,6 +151,7 @@
                  :icon                :i/pin
                  :counter-value       pins-count
                  :on-press            (fn []
+                                        (rf/dispatch [:dismiss-keyboard])
                                         (rf/dispatch [:pin-message/show-pins-bottom-sheet
                                                       chat-id]))}
                 {:accessibility-label :action-button-mute

src/status_im/contexts/preview/quo/main.cljs

@@ -158,7 +158,6 @@
     [status-im.contexts.preview.quo.tabs.account-selector :as account-selector]
     [status-im.contexts.preview.quo.tabs.segmented-tab :as segmented]
     [status-im.contexts.preview.quo.tabs.tabs :as tabs]
-    [status-im.contexts.preview.quo.tags.collectible-tag :as collectible-tag]
     [status-im.contexts.preview.quo.tags.context-tags :as context-tags]
     [status-im.contexts.preview.quo.tags.network-tags :as network-tags]
     [status-im.contexts.preview.quo.tags.number-tag :as number-tag]
@@ -179,7 +178,6 @@
     [status-im.contexts.preview.quo.wallet.account-overview :as
      account-overview]
     [status-im.contexts.preview.quo.wallet.account-permissions :as account-permissions]
-    [status-im.contexts.preview.quo.wallet.amount-input :as amount-input]
     [status-im.contexts.preview.quo.wallet.confirmation-progress :as
      confirmation-progress]
     [status-im.contexts.preview.quo.wallet.keypair :as keypair]
@@ -459,9 +457,7 @@
                         :component tabs/view}
                        {:name      :account-selector
                         :component account-selector/view}]
-   :tags              [{:name      :collectible-tag
-                        :component collectible-tag/view}
-                       {:name      :context-tags
+   :tags              [{:name      :context-tags
                         :component context-tags/view}
                        {:name      :network-tags
                         :component network-tags/view}
@@ -497,8 +493,6 @@
                         :component account-overview/view}
                        {:name      :account-permissions
                         :component account-permissions/view}
-                       {:name      :amount-input
-                        :component amount-input/view}
                        {:name      :confirmation-progress
                         :component confirmation-progress/view}
                        {:name :keypair :component keypair/view}

src/status_im/contexts/preview/quo/tags/collectible_tag.cljs

@@ -1,51 +0,0 @@
-(ns status-im.contexts.preview.quo.tags.collectible-tag
-  (:require
-    [oops.core :refer [oget]]
-    [quo.core :as quo]
-    [react-native.core :as rn]
-    [reagent.core :as reagent]
-    [status-im.common.resources :as resources]
-    [status-im.contexts.preview.quo.preview :as preview]))
-
-(def descriptor
-  [{:key     :size
-    :type    :select
-    :options [{:key   :size-24
-               :value "Size 24"}
-              {:key   :size-32
-               :value "Size 32"}]}
-   {:key     :options
-    :type    :select
-    :options [{:key   false
-               :value false}
-              {:key   :add
-               :value :add}
-              {:key   :hold
-               :value :hold}]}
-   {:key  :blur?
-    :type :boolean}
-   {:key  :collectible-name
-    :type :text}
-   {:key  :collectible-id
-    :type :text}])
-
-(defn view
-  []
-  (let [state     (reagent/atom {:size                :size-24
-                                 :collectible-name    "Collectible"
-                                 :collectible-id      "#123"
-                                 :collectible-img-src (resources/mock-images :collectible)
-                                 :options             false
-                                 :blur?               false
-                                 :container-width     0})
-        on-layout #(swap! state assoc
-                     :container-width
-                     (oget % :nativeEvent :layout :width))]
-    (fn []
-      [preview/preview-container
-       {:state                 state
-        :blur?                 (:blur? @state)
-        :show-blur-background? true
-        :descriptor            descriptor}
-       [rn/view {:style {:align-items :center}}
-        [quo/collectible-tag (assoc @state :on-layout on-layout)]]])))

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

@@ -1,29 +0,0 @@
-(ns status-im.contexts.preview.quo.wallet.amount-input
-  (:require
-    [quo.core :as quo]
-    [reagent.core :as reagent]
-    [status-im.contexts.preview.quo.preview :as preview]))
-
-(def descriptor
-  [{:key  :max-value
-    :type :number}
-   {:key  :min-value
-    :type :number}
-   {:key  :init-value
-    :type :number}
-   {:type    :select
-    :key     :status
-    :options [{:key :default}
-              {:key :error}]}])
-
-(defn view
-  []
-  (let [state (reagent/atom {:max-value  10000
-                             :min-value  0
-                             :init-value 1
-                             :status     :default})]
-    (fn []
-      [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [quo/amount-input @state]])))

src/status_im/contexts/profile/settings/header/avatar.cljs

@@ -1,36 +1,34 @@
-(ns ^:workletize status-im.contexts.profile.settings.header.avatar
+(ns status-im.contexts.profile.settings.header.avatar
   (:require [quo.core :as quo]
             [quo.theme :as quo.theme]
             [react-native.reanimated :as reanimated]
             [status-im.contexts.profile.settings.header.style :as style]))
 
+(def scroll-animation-input-range [0 50])
+(def header-extrapolation-option
+  {:extrapolateLeft  "clamp"
+   :extrapolateRight "clamp"})
+
 (defn f-avatar
   [{:keys [scroll-y full-name online? profile-picture customization-color]}]
-  (let [avatar-total-size     88
-        border-height         4
-        translation-to-bottom (fn [scale inverse-scale]
-                                (js* "'worklet'")
-                                (let [current-avatar-size (* avatar-total-size (- 1 scale))
-                                      current-center      (/ current-avatar-size 2)]
-                                  (* current-center inverse-scale)))
-        transform             (reanimated/use-animated-style
-                               (fn []
-                                 (js* "'worklet'")
-                                 (let [scale         (reanimated/interpolate*
-                                                      (.-value scroll-y)
-                                                      #js [0 48]
-                                                      #js [1 0.4]
-                                                      "clamp")
-                                       inverse-scale (/ 1 scale)
-                                       translation   (translation-to-bottom scale inverse-scale)
-                                       bottom        (* border-height inverse-scale (- 1 scale))]
-                                   #js
-                                    {:transform #js
-                                                 [#js {:scale scale}
-                                                  #js {:translateX (- translation)}
-                                                  #js {:translateY (- translation bottom)}]})))
-        theme                 (quo.theme/get-theme)]
-    [reanimated/view {:style [transform (style/avatar-container theme)]}
+  (let [image-scale-animation       (reanimated/interpolate scroll-y
+                                                            scroll-animation-input-range
+                                                            [1 0.4]
+                                                            header-extrapolation-option)
+        image-top-margin-animation  (reanimated/interpolate scroll-y
+                                                            scroll-animation-input-range
+                                                            [0 20]
+                                                            header-extrapolation-option)
+        image-side-margin-animation (reanimated/interpolate scroll-y
+                                                            scroll-animation-input-range
+                                                            [0 -20]
+                                                            header-extrapolation-option)
+        theme                       (quo.theme/get-theme)]
+    [reanimated/view
+     {:style (style/avatar-container theme
+                                     image-scale-animation
+                                     image-top-margin-animation
+                                     image-side-margin-animation)}
      [quo/user-avatar
       {:full-name           full-name
        :online?             online?

src/status_im/contexts/profile/settings/header/header_shape.cljs

@@ -1,11 +1,10 @@
-(ns ^:workletize status-im.contexts.profile.settings.header.header-shape
+(ns status-im.contexts.profile.settings.header.header-shape
   (:require [quo.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.reanimated :as reanimated]
             [react-native.svg :as svg]
             [status-im.contexts.profile.settings.header.style :as style]))
 
-
 (defn left-radius
   [background-color]
   [svg/svg {:width "20" :height "20" :viewBox "0 0 20 20" :fill "none"}
@@ -22,17 +21,13 @@
 
 (defn f-view
   [{:keys [scroll-y customization-color theme]}]
-  (let [background-color (colors/resolve-color customization-color theme 40)
-        opacity          (reanimated/use-animated-style
-                          (fn []
-                            (js* "'worklet'")
-                            #js
-                             {:opacity (reanimated/interpolate* (.-value scroll-y)
-                                                                #js [0 45 50]
-                                                                #js [1 1 0])}))]
+  (let [background-color  (colors/resolve-color customization-color theme 40)
+        opacity-animation (reanimated/interpolate scroll-y
+                                                  [0 45 50]
+                                                  [1 1 0])]
     [:<>
      [rn/view {:style (style/header-middle-shape background-color)}]
-     [reanimated/view {:style [opacity style/radius-container]}
+     [reanimated/view {:style (style/radius-container opacity-animation)}
       [left-radius background-color]
       [right-radius background-color]]]))
 

src/status_im/contexts/profile/settings/header/style.cljs

@@ -27,13 +27,19 @@
    :height           48
    :flex-grow        1})
 
-(def radius-container
-  {:flex-direction  :row
+(defn radius-container
+  [opacity-animation]
+  {:opacity         opacity-animation
+   :flex-direction  :row
    :justify-content :space-between})
 
 (defn avatar-container
-  [theme]
-  {:align-items   :flex-start
-   :border-width  4
-   :border-color  (colors/theme-colors colors/border-avatar-light colors/neutral-80-opa-80 theme)
-   :border-radius 44})
+  [theme scale-animation top-margin-animation side-margin-animation]
+  [{:transform     [{:scale scale-animation}]
+    :margin-top    top-margin-animation
+    :margin-left   side-margin-animation
+    :margin-bottom side-margin-animation}
+   {:align-items   :flex-start
+    :border-width  4
+    :border-color  (colors/theme-colors colors/border-avatar-light colors/neutral-80-opa-80 theme)
+    :border-radius 100}])

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

@@ -33,8 +33,7 @@
                   {:account    edited-account-data
                    :on-success #(show-save-account-toast updated-key)}])))
 
-(defn view
-  []
+(def view
   (let [edited-account-name  (reagent/atom nil)
         show-confirm-button? (reagent/atom false)
         on-change-color      (fn [edited-color {:keys [color] :as account}]

src/status_im/navigation/events.cljs

@@ -147,13 +147,13 @@
 
 (rf/defn show-bottom-sheet
   {:events [:show-bottom-sheet]}
-  [{:keys [db] :as cofx} content]
+  [{:keys [db]} content]
   (let [{:keys [sheets hide?]} (:bottom-sheet db)]
-    (rf/merge cofx
-              {:db               (update-in db [:bottom-sheet :sheets] #(conj % content))
-               :dismiss-keyboard nil}
+    (rf/merge {:db (update-in db [:bottom-sheet :sheets] #(conj % content))}
               #(when-not hide?
-                 (if (seq sheets) (hide-bottom-sheet %) {:show-bottom-sheet nil})))))
+                 (if (seq sheets)
+                   (hide-bottom-sheet %)
+                   {:show-bottom-sheet nil})))))
 
 ;; LEGACY (should be removed in status 2.0)
 (rf/defn hide-signing-sheet

src/status_im/setup/build_hooks/worklets.clj

@@ -1,101 +0,0 @@
-(ns status-im.setup.build-hooks.worklets
-  (:require [clojure.set])
-  (:import (java.io BufferedReader InputStreamReader PrintWriter)))
-
-(defn- update-js-output
-  [build-state code-processed]
-  (reduce-kv (fn [prev-build-state ns-key new-code]
-               (assoc-in prev-build-state [:output ns-key :js] new-code))
-             build-state
-             code-processed))
-
-(defn- get-workletized-code!
-  [code-seq store-atom]
-  (doall
-   (map (fn [[[_ filepath :as ns-key] js-code]]
-           (println "Workletizing:" filepath) ;; TODO: debug remove
-           (try
-             (let [command       "node workletize-code.js"
-                   process       (.exec (Runtime/getRuntime) command)
-                   output-stream (.getOutputStream process)
-                   writer        (PrintWriter. output-stream)
-                   reader        (BufferedReader. (InputStreamReader. (.getInputStream process)))]
-               (.println writer js-code)
-               (.flush writer)
-               (.close writer)
-
-               (let [output     (apply str (interleave (line-seq reader) (repeat "\n")))
-                     exit-code (.waitFor process)]
-                 (println ">>>>>>>>>>>>>>>>>>>>>>>>EXIT CODE:" exit-code)
-                 (println "RESULT for "filepath ":\n\n" output "\n\n")
-                 (swap! store-atom assoc ns-key output)))
-
-             (catch Exception e
-               (println (str "Exception while workletizing: " filepath "\n")
-                        (.getMessage e)))))
-         code-seq)))
-
-(defn- get-js-code-with-ns
-  [build-state-output file-path]
-  (let [ns-key  [:shadow.build.classpath/resource file-path]
-        js-code (get-in build-state-output [ns-key :js])]
-    [ns-key js-code]))
-
-(defn- get-files-to-workletize
-  [{:keys [shadow.build/build-info compiler-env] :as _build-state}]
-  (let [files-compiled      (->> build-info
-                                 :compiled
-                                 (map second)
-                                 (set))
-        namespaces-metadata (->> compiler-env
-                                 :cljs.analyzer/namespaces
-                                 vals
-                                 (map :meta))
-        files-marked        (->> namespaces-metadata
-                                 (filter :workletize)
-                                 (map :file)
-                                 (set))]
-    (clojure.set/intersection files-compiled files-marked)))
-
-(defn transform-output
-  {:shadow.build/stage :compile-finish}
-  [{:keys [output] :as build-state}]
-  (tap> [:start build-state])
-  (let [files-to-workletize  (get-files-to-workletize build-state)
-        js-code-with-ns      (map #(get-js-code-with-ns output %) files-to-workletize)
-        code-processed-store (atom {})]
-    (get-workletized-code! js-code-with-ns code-processed-store)
-    (tap> [:end (update-js-output build-state @code-processed-store)])
-    (update-js-output build-state @code-processed-store)
-    (println "\n\n>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> CODE PROCESSED <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<")
-    (prn @code-processed-store)
-    (println ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ______________ <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<\n\n")
-    )
-  build-state
-  )
-
-(defn optimize-start
-  {:shadow.build/stage :optimize-prepare}
-  [{:keys [output] :as build-state}]
-  (let [files-to-workletize (get-files-to-workletize build-state)
-        js-code-with-ns     (map #(get-js-code-with-ns output %) (conj files-to-workletize "status_im/contexts/profile/settings/header/style.cljs"))
-        ]
-    (println "START ---------------------------------------------------------" )
-    (prn js-code-with-ns)
-    (println "================================================================---------------------------------------------------------" )
-    #_(println "output: ---------------------------------------------------------------"
-               js-code-with-ns)
-    build-state))
-
-(defn optimize-output
-  {:shadow.build/stage :optimize-finish}
-  [{:keys [output] :as build-state}]
-  (let [files-to-workletize (get-files-to-workletize build-state)
-        js-code-with-ns     (map #(get-js-code-with-ns output %) (conj files-to-workletize "status_im/contexts/profile/settings/header/style.cljs"))
-        ]
-    (println "END ---------------------------------------------------------" )
-    (prn js-code-with-ns)
-    (println "================================================================---------------------------------------------------------" )
-    #_(println "output: ---------------------------------------------------------------"
-               js-code-with-ns)
-    build-state))

src/test_helpers/component.cljs

@@ -53,10 +53,8 @@
   (rtl/render (reagent/as-element component)))
 
 (defn render-with-theme-provider
-  ([component]
-   (render-with-theme-provider component :light))
-  ([component theme]
-   (rtl/render (reagent/as-element [quo.theme/provider {:theme theme} component]))))
+  [component theme]
+  (rtl/render (reagent/as-element [quo.theme/provider {:theme theme} component])))
 
 (def unmount
   "Unmount rendered component.

workletize-code.js

@@ -1,22 +0,0 @@
-const process = require('process');
-const babel = require('@babel/core');
-const plugin = require('./node_modules/react-native-reanimated/plugin');
-
-function transformString(inputString) {
-  return babel.transformSync(inputString, {
-    filename: '/dev/null',
-    compact: false,
-    plugins: [plugin],
-  }).code;
-}
-
-process.stdin.setEncoding('utf8');
-let input = '';
-process.stdin.on('data', (chunk) => {
-  input += chunk;
-});
-
-process.stdin.on('end', () => {
-  const result = transformString(input);
-  process.stdout.write(result);
-});