Bump version to 0.174.0

Makefile

@@ -373,20 +373,15 @@ test-watch-for-repl: ##@test Watch all Clojure tests and support REPL connection
 		"until [ -f $$SHADOW_OUTPUT_TO ] ; do sleep 1 ; done ; node --require ./test-resources/override.js $$SHADOW_OUTPUT_TO --repl"
 
 test-unit: export SHADOW_OUTPUT_TO := target/unit_test/test.js
-test-unit: export SHADOW_NS_REGEXP := ^(?!tests\.integration-test)(?!tests-im\.contract-test).*-test$$
+test-unit: export SHADOW_NS_REGEXP := ^(?!status-im\.integration-test).*-test$$
 test-unit: ##@test Run unit tests
 test-unit: _test-clojure
 
 test-integration: export SHADOW_OUTPUT_TO := target/integration_test/test.js
-test-integration: export SHADOW_NS_REGEXP := ^tests\.integration-test.*$$
+test-integration: export SHADOW_NS_REGEXP := ^status-im\.integration-test.*$$
 test-integration: ##@test Run integration tests
 test-integration: _test-clojure
 
-test-contract: export SHADOW_OUTPUT_TO := target/contract_test/test.js
-test-contract: export SHADOW_NS_REGEXP := ^tests\.contract-test.*$$
-test-contract: ##@test Run contract tests
-test-contract: _test-clojure
-
 android-test: jsbundle
 android-test: export TARGET := android
 android-test:

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!`.
@@ -179,6 +176,7 @@
                                       ;; option setupFilesAfterEnv.
                                       test-helpers.component-tests-preload
                                       status-im.setup.schema-preload
+
                                       quo.core-spec
                                       status-im.core-spec]
                    :ns-regexp        "component-spec$"

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

@@ -4,19 +4,14 @@
 
 (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
+(defn custom-color-type
   [customization-color icon-only?]
-  {:icon-color                  colors/white-opa-70
-   :label-color                 colors/white
-   :background-color            (colors/resolve-color customization-color :light)
-   :border-radius               (when icon-only? 24)
-   :overlay-customization-color customization-color})
+  {:icon-color       colors/white-opa-70
+   :label-color      colors/white
+   :background-color (colors/custom-color customization-color 50)
+   :border-radius    (when icon-only? 24)})
 
-(defn- grey-photo
+(defn grey-photo
   [theme pressed?]
   {:icon-color         (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
    :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
@@ -29,7 +24,7 @@
                                               theme))
    :blur-type          (if (= theme :light) :light :dark)})
 
-(defn- grey-blur
+(defn grey-blur
   [theme pressed?]
   {:icon-color       (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
    :label-color      (colors/theme-colors colors/neutral-100 colors/white theme)
@@ -37,7 +32,7 @@
                        (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
                        (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))})
 
-(defn- outline-blur
+(defn outline-blur
   [theme pressed?]
   {:icon-color   (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
    :label-color  (colors/theme-colors colors/neutral-100 colors/white theme)
@@ -45,7 +40,7 @@
                    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
                    (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme))})
 
-(defn- grey
+(defn grey
   [theme pressed?]
   {:icon-color       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
    :label-color      (colors/theme-colors colors/neutral-100 colors/white theme)
@@ -55,7 +50,7 @@
                                             colors/neutral-90
                                             theme))})
 
-(defn- dark-grey
+(defn dark-grey
   [theme pressed?]
   {:icon-color       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
    :label-color      (colors/theme-colors colors/neutral-100 colors/white theme)
@@ -63,7 +58,7 @@
                        (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
                        (colors/theme-colors colors/neutral-20 colors/neutral-90 theme))})
 
-(defn- outline
+(defn outline
   [theme pressed?]
   {:icon-color   (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
    :label-color  (colors/theme-colors colors/neutral-100 colors/white theme)
@@ -71,32 +66,29 @@
                    (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
                    (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
 
-(defn- ghost
+(defn ghost
   [theme pressed?]
   {:icon-color       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
    :label-color      (colors/theme-colors colors/neutral-100 colors/white theme)
    :background-color (when pressed?
                        (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
 
-(defn- black
+(defn black
   [pressed?]
   {:label-color      colors/white
    :background-color (if pressed? colors/neutral-80 colors/neutral-95)})
 
 (defn get-values
   [{:keys [customization-color theme type background pressed? icon-only?]}]
-  (let [customization-color (get {:primary  customization-color
-                                  :positive :success
-                                  :danger   :danger}
-                                 type)]
-    (cond
-      (contains? #{:primary :positive :danger} type) (custom-color-type customization-color
-                                                                        icon-only?)
-      (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?)
-      (= type :grey)                                 (grey theme pressed?)
-      (= type :dark-grey)                            (dark-grey theme pressed?)
-      (= type :outline)                              (outline theme pressed?)
-      (= type :ghost)                                (ghost theme pressed?)
-      (= type :black)                                (black pressed?))))
+  (cond
+    (= type :primary)                            (custom-color-type customization-color icon-only?)
+    (= type :positive)                           (custom-color-type customization-color icon-only?)
+    (= type :danger)                             (custom-color-type customization-color icon-only?)
+    (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?)
+    (= type :grey)                               (grey theme pressed?)
+    (= type :dark-grey)                          (dark-grey theme pressed?)
+    (= type :outline)                            (outline theme pressed?)
+    (= type :ghost)                              (ghost theme pressed?)
+    (= type :black)                              (black pressed?)))

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

@@ -37,10 +37,13 @@
                pressed? on-press-in on-press-out allow-multiple-presses?]
         :or   {type                :primary
                size                40
-               customization-color (if (= type :primary) :blue nil)}}
+               customization-color (cond (= type :primary)  :blue
+                                         (= type :positive) :success
+                                         (= type :danger)   :danger
+                                         :else              nil)}}
        children]
       (let [{:keys [icon-color background-color label-color border-color blur-type
-                    blur-overlay-color border-radius overlay-customization-color]}
+                    blur-overlay-color border-radius]}
             (button-properties/get-values {:customization-color customization-color
                                            :background          background
                                            :type                type
@@ -76,9 +79,9 @@
                                             :icon-left        icon-left
                                             :icon-right       icon-right})
                     inner-style)}
-           (when overlay-customization-color
+           (when customization-color
              [customization-colors/overlay
-              {:customization-color overlay-customization-color
+              {:customization-color customization-color
                :theme               theme
                :pressed?            (if pressed? pressed? @pressed-state?)}])
            (when (= background :photo)

src/quo/components/colors/color_picker/view.cljs

@@ -35,7 +35,7 @@
             (when (and @ref (>= index 0))
               (some-> ^js @ref
                       (.scrollToIndex #js
-                                       {:animated     false
+                                       {:animated     true
                                         :index        index
                                         :viewPosition 0.5})))))
         50)))

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

@@ -3,60 +3,34 @@
     [quo.components.drawers.bottom-actions.view :as bottom-actions]
     [test-helpers.component :as h]))
 
-(defn- render
-  [component]
-  (h/render-with-theme-provider component :light))
-
 (h/describe "bottom actions tests"
   (h/test "default render with no description and single action button"
-    (render [bottom-actions/view {:actions :one-action :button-one-label "Request to join"}])
+    (h/render [bottom-actions/view {:button-one-label "Request to join"}])
     (h/is-truthy (h/get-by-text "Request to join")))
 
-  (h/test "render with description & 1 action"
-    (render [bottom-actions/view
-             {:description      :bottom
-              :description-text "Sample description"
-              :actions          :one-action
-              :button-one-label "Request to join"}])
-    (h/is-truthy (h/get-by-text "Sample description"))
-    (h/is-truthy (h/get-by-text "Request to join")))
+  (h/test "render with description"
+    (h/render [bottom-actions/view {:description "Sample description"}])
+    (h/is-truthy (h/get-by-text "Sample description")))
 
   (h/test "render with 2 actions"
     (let [button-one "Button One"
           button-two "Button Two"]
-      (render [bottom-actions/view
-               {:actions          :two-actions
-                :button-one-label button-one
-                :button-one-props {:icon-left :i/arrow-left}
-                :button-two-label button-two}])
+      (h/render [bottom-actions/view
+                 {:actions          :2-actions
+                  :button-one-label button-one
+                  :button-one-props {:icon-left :i/arrow-left}
+                  :button-two-label button-two}])
       (h/is-truthy (h/get-by-text button-one))
       (h/is-truthy (h/get-by-label-text :icon))
       (h/is-truthy (h/get-by-text button-two))))
 
   (h/test "render disabled button"
-    (render [bottom-actions/view
-             {:description      :bottom
-              :actions          :one-action
-              :description-text "Sample description"
-              :button-one-props {:disabled? true}
-              :button-one-label "button"}])
+    (h/render [bottom-actions/view
+               {:description      "Sample description"
+                :button-one-props {:disabled? true}
+                :button-one-label "button"}])
     (h/is-disabled (h/get-by-label-text :button-one)))
 
-  (h/test "render with error & 1 action"
-    (render [bottom-actions/view
-             {:description      :top-error
-              :error-message    "Sample error"
-              :actions          :one-action
-              :button-one-label "Request to join"}])
-    (h/is-truthy (h/get-by-text "Sample error"))
-    (h/is-truthy (h/get-by-text "Request to join")))
-
-  (h/test "render with top description & 1 action"
-    (render [bottom-actions/view
-             {:description      :top
-              :role             :admin
-              :actions          :one-action
-              :button-one-label "Request to join"}])
-    (h/is-truthy (h/get-by-text "Eligible to join as"))
-    (h/is-truthy (h/get-by-text "Admin"))
-    (h/is-truthy (h/get-by-text "Request to join"))))
+  (h/test "sane defaults"
+    (h/render [bottom-actions/view {}])
+    (h/is-truthy (h/get-by-label-text :button-one))))

src/quo/components/drawers/bottom_actions/style.cljs

@@ -2,58 +2,34 @@
   (:require
     [quo.foundations.colors :as colors]))
 
-(defn- text-color
-  [scroll? blur? theme]
-  (cond
-    scroll? (if blur?
-              colors/white-70-blur
-              (colors/theme-colors colors/neutral-80-opa-70
-                                   colors/white-opa-70
-                                   theme))
-    blur?   colors/white-opa-40
-    :else   (colors/theme-colors colors/neutral-50
-                                 colors/neutral-40
-                                 theme)))
-
-(defn container
-  [scroll? blur? theme]
-  {:background-color (when-not (or scroll? blur?)
-                       (colors/theme-colors colors/white colors/neutral-95 theme))})
-
 (def buttons-container
   {:flex-direction     :row
    :justify-content    :space-around
    :padding-vertical   12
-   :gap                12
    :padding-horizontal 20})
 
 (def button-container
   {:flex 1})
 
-(def description-top
-  {:flex-direction  :row
-   :align-items     :center
-   :gap             5
-   :padding-top     12
-   :padding-bottom  4
-   :justify-content :center})
+(def button-container-2-actions
+  (assoc button-container :margin-right 12))
 
-(defn description-top-text
-  [scroll? blur? theme]
-  {:color (text-color scroll? blur? theme)})
-
-(defn description-bottom
-  [scroll? blur? theme]
-  {:color              (text-color scroll? blur? theme)
+(defn description
+  [theme scroll?]
+  {:color              (colors/theme-colors
+                        (if scroll?
+                          (colors/custom-color colors/neutral-80 70)
+                          colors/neutral-50)
+                        (if scroll?
+                          colors/white-opa-70
+                          colors/neutral-40)
+                        theme)
    :text-align         :center
-   :padding-bottom     12
    :padding-horizontal 40})
 
-(def error-message
-  {:flex-direction     :row
-   :gap                4
-   :justify-content    :center
-   :align-items        :center
-   :padding-top        15
-   :padding-horizontal 20
-   :padding-bottom     7})
+(def scroll
+  {:margin-top        21
+   :margin-horizontal 120
+   :margin-bottom     8
+   :width             134
+   :height            5})

src/quo/components/drawers/bottom_actions/view.cljs

@@ -2,96 +2,55 @@
   (:require
     [quo.components.buttons.button.view :as button]
     [quo.components.drawers.bottom-actions.style :as style]
-    [quo.components.icon :as icon]
     [quo.components.markdown.text :as text]
-    [quo.components.tags.context-tag.view :as context-tag]
-    [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
-    [react-native.core :as rn]
-    [schema.core :as schema]
-    [utils.i18n :as i18n]))
+    [react-native.core :as rn]))
 
-(def ?schema
-  [:=>
-   [:catn
-    [:props
-     [:map {:closed true}
-      [:actions [:maybe [:enum :one-action :two-actions]]]
-      [:description {:optional true} [:maybe [:enum :top :bottom :top-error]]]
-      [:description-text {:optional true} [:maybe :string]]
-      [:error-message {:optional true} [:maybe :string]]
-      [:role {:optional true} [:maybe [:enum :admin :member :token-master :owner]]]
-      [:button-one-label {:optional true} [:maybe :string]]
-      [:button-two-label {:optional true} [:maybe :string]]
-      [:button-one-props {:optional true} [:maybe :map]]
-      [:button-two-props {:optional true} [:maybe :map]]
-      [:theme :schema.common/theme]
-      [:scroll? {:optional true} [:maybe :boolean]]
-      [:blur? {:optional true} [:maybe :boolean]]
-      [:container-style {:optional true} [:maybe :map]]]]]
-   :any])
-
-(def ^:private role-icon
-  {:admin        :i/gavel
-   :member       :i/members
-   :token-master :i/token-master
-   :owner        :i/crown})
+(def default-props
+  {:button-one-type     :primary
+   :button-two-type     :grey
+   :customization-color :blue})
 
 (defn- view-internal
-  [{:keys [actions description description-text error-message role button-one-label button-two-label
-           blur? button-one-props button-two-props theme scroll? container-style]}]
-  [rn/view
-   {:style (merge (style/container scroll? blur? theme) container-style)}
-   (when (= description :top-error)
-     [rn/view {:style style/error-message}
-      [icon/icon
-       :i/alert
-       {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)
-        :size  16}]
-      [text/text
-       {:size  :paragraph-2
-        :style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}}
-       error-message]])
+  "Options:
 
-   (when (= description :top)
-     [rn/view
-      {:style style/description-top}
-      [text/text
-       {:size  :paragraph-2
-        :style (style/description-top-text scroll? blur? theme)}
-       (i18n/label :t/eligible-to-join-as)]
-      [context-tag/view
-       {:type    :icon
-        :size    24
-        :icon    (role role-icon)
-        :blur?   blur?
-        :context (i18n/label (keyword "t" role))}]])
-
-   [rn/view {:style style/buttons-container}
-    (when (= actions :two-actions)
+  :actions - keyword (default nil) - :1-action/:2-actions
+  :description - string (default nil) - Description to display below the title
+  :button-one-label - string (default nil) - Label for the first button
+  :button-two-label - string (default nil) - Label for the second button
+  :button-one-props - map with props for button one
+  :button-two-props - map with props for button two
+  :theme - :light/:dark
+  :scroll? - bool (default false) - Whether the iOS Home Indicator should be rendered"
+  [props]
+  (let [{:keys [actions description button-one-label button-two-label
+                button-one-props button-two-props theme scroll? customization-color container-style]}
+        (merge default-props props)]
+    [rn/view {:style container-style}
+     [rn/view {:style style/buttons-container}
+      (when (= actions :2-actions)
+        [button/button
+         (merge
+          {:size                40
+           :background          (when scroll? :blur)
+           :container-style     style/button-container-2-actions
+           :theme               theme
+           :accessibility-label :button-two}
+          button-two-props)
+         button-two-label])
       [button/button
        (merge
         {:size                40
-         :background          (when (or blur? scroll?) :blur)
          :container-style     style/button-container
+         :background          (when scroll? :blur)
          :theme               theme
-         :accessibility-label :button-two}
-        button-two-props)
-       button-two-label])
-    [button/button
-     (merge
-      {:size                40
-       :container-style     style/button-container
-       :background          (when (or blur? scroll?) :blur)
-       :theme               theme
-       :accessibility-label :button-one}
-      button-one-props)
-     button-one-label]]
-   (when (= description :bottom)
-     [text/text
-      {:size  :paragraph-2
-       :style (style/description-bottom scroll? blur? theme)} description-text])])
+         :accessibility-label :button-one
+         :customization-color customization-color}
+        button-one-props)
+       button-one-label]]
+     (when description
+       [text/text
+        {:size  :paragraph-2
+         :style (style/description theme scroll?)} description])]))
 
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal ?schema)))
+(def view (quo.theme/with-theme view-internal))

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

@@ -3,110 +3,97 @@
     [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-with-theme-provider [quo/drawer-top
-                                   {:title "Title"
-                                    :type  :default}]
-                                  theme)
+    (h/render [quo/drawer-top
+               {:title "Title"
+                :type  :default}])
     (h/is-truthy (h/get-by-text "Title")))
 
   (h/test "component renders in default + description type"
-    (h/render-with-theme-provider [quo/drawer-top
-                                   {:title       "Title"
-                                    :type        :default
-                                    :description "Description"}]
-                                  theme)
+    (h/render [quo/drawer-top
+               {:title       "Title"
+                :type        :default
+                :description "Description"}])
     (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-with-theme-provider [quo/drawer-top
-                                   {:title "Title"
-                                    :type  :info}]
-                                  theme)
+    (h/render [quo/drawer-top
+               {:title "Title"
+                :type  :info}])
     (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-with-theme-provider [quo/drawer-top
-                                   {:title       "Title"
-                                    :description "Description"
-                                    :type        :info}]
-                                  theme)
+    (h/render [quo/drawer-top
+               {:title       "Title"
+                :description "Description"
+                :type        :info}])
     (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-with-theme-provider [quo/drawer-top
-                                   {:title          "Title"
-                                    :type           :context-tag
-                                    :community-name "Coinbase"}]
-                                  theme)
+    (h/render [quo/drawer-top
+               {:title          "Title"
+                :type           :context-tag
+                :community-name "Coinbase"}])
     (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-with-theme-provider [quo/drawer-top
-                                   {:title          "Title"
-                                    :type           :context-tag
-                                    :button-icon    :i/placeholder
-                                    :community-name "Coinbase"}]
-                                  theme)
+    (h/render [quo/drawer-top
+               {:title          "Title"
+                :type           :context-tag
+                :button-icon    :i/placeholder
+                :community-name "Coinbase"}])
     (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-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}]
-                                  theme)
+    (h/render [quo/drawer-top
+               {:title                "Title"
+                :type                 :account
+                :account-avatar-emoji "🍿"
+                :networks             [{:name :ethereum :short-name "eth"}]
+                :description          "0x62b...0a5"
+                :customization-color  :purple}])
     (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-with-theme-provider [quo/drawer-top
-                                   {:title       "Title"
-                                    :keycard?    false
-                                    :icon-avatar :i/placeholder
-                                    :type        :keypair}]
-                                  theme)
+    (h/render [quo/drawer-top
+               {:title       "Title"
+                :keycard?    false
+                :icon-avatar :i/placeholder
+                :type        :keypair}])
     (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-with-theme-provider [quo/drawer-top
-                                   {:title       "Title"
-                                    :keycard?    true
-                                    :icon-avatar :i/placeholder
-                                    :type        :keypair}]
-                                  theme)
+    (h/render [quo/drawer-top
+               {:title       "Title"
+                :keycard?    true
+                :icon-avatar :i/placeholder
+                :type        :keypair}])
     (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-with-theme-provider [quo/drawer-top
-                                   {:title       "Title"
-                                    :description "0x62b...0a5"
-                                    :type        :default-keypair}]
-                                  theme)
+    (h/render [quo/drawer-top
+               {:title       "Title"
+                :description "0x62b...0a5"
+                :type        :default-keypair}])
     (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-with-theme-provider [quo/drawer-top
-                                   {:label "label"
-                                    :type  :label}]
-                                  theme)
+    (h/render [quo/drawer-top
+               {:label "label"
+                :type  :label}])
     (h/is-truthy (h/get-by-text "label"))))

src/quo/components/inputs/address_input/view.cljs

@@ -61,30 +61,24 @@
         value    (reagent/atom "")
         focused? (atom false)]
     (fn [{:keys [scanned-value theme blur? on-change-text on-blur on-focus on-clear on-scan
-                 on-detect-ens on-detect-address on-detect-unclassified address-regex ens-regex
-                 valid-ens-or-address? container-style]}]
+                 on-detect-ens on-detect-address address-regex valid-ens-or-address?
+                 container-style]}]
       (let [on-change              (fn [text]
                                      (when (not= @value text)
                                        (let [address? (when address-regex
-                                                        (boolean (re-matches address-regex text)))
-                                             ens?     (when ens-regex
-                                                        (boolean (re-matches ens-regex text)))]
+                                                        (boolean (re-matches address-regex text)))]
                                          (if (> (count text) 0)
                                            (reset! status :typing)
                                            (reset! status :active))
                                          (reset! value text)
                                          (when on-change-text
                                            (on-change-text text))
-                                         (when (and on-detect-ens ens?)
+                                         (when (and on-detect-ens (> (count text) 0))
                                            (reset! status :loading)
                                            (on-detect-ens text #(reset! status :typing)))
                                          (when (and address? on-detect-address)
                                            (reset! status :loading)
-                                           (on-detect-address text))
-                                         (when (and (not address?)
-                                                    (not ens?)
-                                                    on-detect-unclassified)
-                                           (on-detect-unclassified text)))))
+                                           (on-detect-address text)))))
             on-paste               (fn []
                                      (clipboard/get-string
                                       (fn [clipboard]

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

@@ -4,83 +4,79 @@
     [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-with-theme-provider [account/view] theme)
+    (h/render [account/view])
     (h/is-truthy (h/query-by-label-text :container)))
 
   (h/test "on-press-in changes state to :pressed"
-    (h/render-with-theme-provider [account/view] theme)
+    (h/render [account/view])
     (h/fire-event :on-press-in (h/get-by-label-text :container))
     (h/wait-for #(h/has-style (h/query-by-label-text :container)
                               {:backgroundColor (colors/resolve-color :blue :light 5)})))
 
   (h/test "on-press-in changes state to :pressed with blur? enabled"
-    (h/render-with-theme-provider [account/view {:blur? true}] theme)
+    (h/render [account/view {:blur? true}])
     (h/fire-event :on-press-in (h/get-by-label-text :container))
     (h/wait-for #(h/has-style (h/query-by-label-text :container)
                               {:backgroundColor colors/white-opa-5})))
 
   (h/test "render with state :active"
-    (h/render-with-theme-provider [account/view {:state :active}] theme)
+    (h/render [account/view {:state :active}])
     (h/has-style (h/query-by-label-text :container)
                  {:backgroundColor (colors/resolve-color :blue :light 10)}))
 
   (h/test "render with state :active and blur? enabled"
-    (h/render-with-theme-provider [account/view
-                                   {:blur? true
-                                    :state :active}]
-                                  theme)
+    (h/render [account/view
+               {:blur? true
+                :state :active}])
     (h/has-style (h/query-by-label-text :container)
                  {:backgroundColor colors/white-opa-10}))
 
   (h/test "render with state :selected"
-    (h/render-with-theme-provider [account/view {:state :selected}] theme)
+    (h/render [account/view {:state :selected}])
     (h/is-truthy (h/query-by-label-text :check-icon)))
 
   (h/test "calls on-press"
     (let [on-press (h/mock-fn)]
-      (h/render-with-theme-provider [account/view {:on-press on-press}] theme)
+      (h/render [account/view {:on-press on-press}])
       (h/fire-event :on-press (h/get-by-label-text :container))
       (h/was-called on-press)))
 
   (h/test "renders token props if type :tag"
-    (h/render-with-theme-provider [account/view {:type :tag}] theme)
+    (h/render [account/view {:type :tag}])
     (h/is-truthy (h/query-by-label-text :tag-container)))
 
   (h/test "renders keycard icon if title-icon is present"
-    (h/render-with-theme-provider [account/view {:title-icon :i/placeholder}] theme)
+    (h/render [account/view {:title-icon :i/placeholder}])
     (h/is-truthy (h/query-by-label-text :title-icon)))
 
   (h/test "doesn't render keycard icon if title-icon is missing"
-    (h/render-with-theme-provider [account/view] theme)
+    (h/render [account/view])
     (h/is-falsy (h/query-by-label-text :title-icon)))
 
   (h/test "renders balance container but not arrow icon if type :balance-neutral"
-    (h/render-with-theme-provider [account/view {:type :balance-neutral}] theme)
+    (h/render [account/view {:type :balance-neutral}])
     (h/is-truthy (h/query-by-label-text :balance-container))
     (h/is-falsy (h/query-by-label-text :arrow-icon)))
 
   (h/test "renders balance container and negative arrow icon if type :balance-negative"
-    (h/render-with-theme-provider [account/view {:type :balance-negative}] theme)
+    (h/render [account/view {:type :balance-negative}])
     (h/is-truthy (h/query-by-label-text :balance-container))
     (h/is-truthy (h/query-by-label-text :icon-negative))
     (h/is-falsy (h/query-by-label-text :icon-positive)))
 
   (h/test "renders balance container and positive arrow icon if type :balance-positive"
-    (h/render-with-theme-provider [account/view {:type :balance-positive}] theme)
+    (h/render [account/view {:type :balance-positive}])
     (h/is-truthy (h/query-by-label-text :balance-container))
     (h/is-falsy (h/query-by-label-text :icon-negative))
     (h/is-truthy (h/query-by-label-text :icon-positive)))
 
   (h/test "renders options button if type :action"
     (let [on-options-press (h/mock-fn)]
-      (h/render-with-theme-provider [account/view
-                                     {:type             :action
-                                      :on-options-press on-options-press}]
-                                    theme)
+      (h/render [account/view
+                 {:type             :action
+                  :on-options-press on-options-press}])
       (h/is-truthy (h/query-by-label-text :options-button))
       (h/fire-event :on-press (h/get-by-label-text :options-button))
       (h/was-called on-options-press))))

src/quo/components/list_items/quiz_item/view.cljs

@@ -9,10 +9,8 @@
     [utils.i18n :as i18n]))
 
 (defn- view-internal
-  [{:keys [state theme number word on-press] :as props}]
-  [rn/pressable
-   {:style    (style/container props)
-    :on-press on-press}
+  [{:keys [state theme number word] :as props}]
+  [rn/view {:style (style/container props)}
    (if (or (= state :empty) (= state :disabled))
      [rn/view
       {:style               (style/num-container props)

src/quo/components/notifications/toast/style.cljs

@@ -24,7 +24,9 @@
   {:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
    :flex-direction   :row
    :justify-content  :space-between
-   :padding          8
+   :padding-vertical 8
+   :padding-left     10
+   :padding-right    8
    :border-radius    12})
 
 (defn title
@@ -45,13 +47,8 @@
                                                      theme))
    :container-style {:width 20 :height 20}})
 
-(def left-side-container
-  {:padding     2
-   :padding-top 3})
-
-(def right-side-container
-  {:padding 4
-   :flex    1})
+(def left-side-container {:padding 2})
+(def right-side-container {:padding 4 :flex 1})
 
 (defn action-container
   [theme]

src/quo/components/notifications/toast/view.cljs

@@ -45,6 +45,7 @@
      :blur-radius   10
      :blur-type     :transparent
      :overlay-color :transparent}]
+
    [rn/view {:style (style/content-container theme)}
     [rn/view {:style style/left-side-container}
      left]
@@ -76,19 +77,16 @@
     :or   {type :neutral icon :i/placeholder}}]
   (let [context-theme (or theme (quo.theme/get-theme))
         icon-name     (case type
-                        :positive (if (= theme :light)
-                                    :i/correct
-                                    :i/correct-dark)
-                        :negative (if (= theme :light)
-                                    :i/incorrect
-                                    :i/incorrect-dark)
+                        :positive :i/correct
+                        :negative :i/incorrect
                         :neutral  icon)]
     [quo.theme/provider {:theme context-theme}
      [toast-container
       {:left            (cond user
                               [user-avatar/user-avatar user]
                               icon-name
-                              [icon/icon icon-name (style/icon type context-theme)])
+                              [icon/icon icon-name (style/icon type context-theme)]
+                        )
        :title           title
        :text            text
        :right           (if undo-duration

src/quo/components/numbered_keyboard/keyboard_key/view.cljs

@@ -15,7 +15,7 @@
 (defn- view-internal
   []
   (let [pressed? (reagent/atom false)]
-    (fn [{:keys [disabled? theme blur? on-press on-long-press type]} label]
+    (fn [{:keys [disabled? theme blur? on-press type]} label]
       (let [label-color      (style/get-label-color disabled? theme blur?)
             background-color (style/toggle-background-color @pressed? blur? theme)]
         [rn/pressable
@@ -24,9 +24,6 @@
           :on-press                (fn []
                                      (when on-press
                                        (on-press label)))
-          :on-long-press           (fn []
-                                     (when (fn? on-long-press)
-                                       (on-long-press label)))
           :allow-multiple-presses? true
           :on-press-in             #(reset! pressed? true)
           :on-press-out            #(reset! pressed? false)

src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs

@@ -6,19 +6,18 @@
     [react-native.core :as rn]))
 
 (defn keyboard-item
-  [{:keys [item type disabled? on-press on-long-press blur? theme]}]
+  [{:keys [item type disabled? on-press blur? theme]}]
   [keyboard-key/view
-   {:disabled?     disabled?
-    :on-press      on-press
-    :on-long-press on-long-press
-    :blur?         blur?
-    :theme         theme
-    :type          type}
+   {:disabled? disabled?
+    :on-press  on-press
+    :blur?     blur?
+    :theme     theme
+    :type      type}
    item])
 
 (defn- view-internal
   []
-  (fn [{:keys [disabled? theme blur? left-action delete-key? on-press on-delete on-long-press-delete
+  (fn [{:keys [disabled? theme blur? left-action delete-key? on-press on-delete
                container-style]
         :or   {left-action :none}}]
     [rn/view
@@ -63,13 +62,12 @@
         :theme     theme}]
       (if delete-key?
         [keyboard-item
-         {:item          :i/backspace
-          :type          :key
-          :disabled?     disabled?
-          :on-press      on-delete
-          :on-long-press on-long-press-delete
-          :blur?         blur?
-          :theme         theme}]
+         {:item      :i/backspace
+          :type      :key
+          :disabled? disabled?
+          :on-press  on-delete
+          :blur?     blur?
+          :theme     theme}]
         [keyboard-item])]]))
 
 (def view (quo.theme/with-theme view-internal))

src/quo/components/settings/data_item/view.cljs

@@ -121,7 +121,7 @@
          {:accessibility-label :data-item
           :disabled            (not icon-right?)
           :on-press            on-press
-          :style               (merge (style/container size card? blur? theme) container-style)}
+          :style               (merge container-style (style/container size card? blur? theme))}
          [left-side props]
          (when (and (= :default status) (not= :small size))
            [right-side

src/quo/components/share/share_qr_code/component_spec.cljs

@@ -2,64 +2,9 @@
   (:require [quo.components.share.share-qr-code.view :as share-qr-code]
             [test-helpers.component :as h]))
 
-(def qr-label "Text shown below QR")
-
-(def default-props
-  {:qr-data      qr-label
-   :qr-image-uri "test-uri"
-   :full-name    "Default name"})
-
-(def profile-props
-  {:type            :profile
-   :profile-picture 123})
-
-(def wallet-props {:networks '(:ethereum)})
-
-(def text-press-event
-  {:test-name           "Text pressed"
-   :accessibility-label :share-qr-code-info-text
-   :event-name          :press
-   :callback-prop-key   :on-text-press})
-
-(def text-long-press-event
-  {:test-name           "Text long pressed"
-   :accessibility-label :share-qr-code-info-text
-   :event-name          :long-press
-   :callback-prop-key   :on-text-long-press})
-
-(def share-press-event
-  {:test-name           "Share button"
-   :accessibility-label :link-to-profile
-   :event-name          :press
-   :callback-prop-key   :on-share-press})
-
-(def multichain-press-event
-  {:test-name           "Multichain tab pressed"
-   :accessibility-label :share-qr-code-multichain-tab
-   :event-name          :press
-   :callback-prop-key   :on-multichain-press})
-
-(def legacy-press-event
-  {:test-name           "Legacy tab pressed"
-   :accessibility-label :share-qr-code-legacy-tab
-   :event-name          :press
-   :callback-prop-key   :on-legacy-press})
-
-(def settings-press-event
-  {:test-name           "Settings pressed"
-   :accessibility-label :share-qr-code-settings
-   :event-name          :press
-   :callback-prop-key   :on-settings-press})
-
 (defn render-share-qr-code
-  [props]
-  ;; NOTE: rendering the profile type first, so that the re-render is triggered.
-  ;; Passing a :key breaks it for some reason.
-  (let [component-rendered (h/render [share-qr-code/view
-                                      (merge
-                                       default-props
-                                       profile-props
-                                       {:qr-data "initial-render"})])
+  [{share-qr-type :type :as props}]
+  (let [component-rendered (h/render [share-qr-code/view {:type share-qr-type}])
         rerender-fn        (h/get-rerender-fn component-rendered)
         share-qr-code      (h/get-by-label-text :share-qr-code)]
     ;; Fires on-layout since it's needed to render the content
@@ -68,52 +13,23 @@
 
 (h/describe "Share QR Code component"
   (h/describe "Renders share-qr-code component in all types"
-    (h/test "Profile"
-      (render-share-qr-code (merge default-props
-                                   profile-props))
-      (h/is-truthy (h/get-by-text qr-label)))
+    (let [qr-label "Text shown below QR"]
+      (h/test "Profile"
+        (render-share-qr-code {:type    :profile
+                               :qr-data qr-label})
+        (h/is-truthy (h/get-by-text qr-label)))
 
-    (h/test "Wallet Legacy"
-      (render-share-qr-code (merge default-props
-                                   wallet-props
-                                   {:type    :wallet
-                                    :address :legacy}))
-      (h/is-truthy (h/get-by-text qr-label)))
+      (h/test "Wallet Legacy"
+        (render-share-qr-code {:type    :wallet-legacy
+                               :qr-data qr-label
+                               :emoji   "👻"})
+        (h/is-truthy (h/get-by-text qr-label)))
 
-    (h/test "Wallet multichain"
-      (render-share-qr-code (merge default-props
-                                   wallet-props
-                                   {:type    :wallet
-                                    :address :multichain}))
-      (h/is-truthy (h/get-by-text qr-label)))
-
-    (h/test "Saved address legacy"
-      (render-share-qr-code (merge default-props
-                                   wallet-props
-                                   {:type    :saved-address
-                                    :address :legacy}))
-      (h/is-truthy (h/get-by-text qr-label)))
-
-    (h/test "Saved address multichain"
-      (render-share-qr-code (merge default-props
-                                   wallet-props
-                                   {:type    :saved-address
-                                    :address :multichain}))
-      (h/is-truthy (h/get-by-text qr-label)))
-
-    (h/test "Watched address legacy"
-      (render-share-qr-code (merge default-props
-                                   wallet-props
-                                   {:type    :watched-address
-                                    :address :legacy}))
-      (h/is-truthy (h/get-by-text qr-label)))
-
-    (h/test "Watched address multichain"
-      (render-share-qr-code (merge default-props
-                                   wallet-props
-                                   {:type    :watched-address
-                                    :address :multichain}))
-      (h/is-truthy (h/get-by-text qr-label))))
+      (h/test "Wallet Multichain"
+        (render-share-qr-code {:type    :wallet-multichain
+                               :qr-data qr-label
+                               :emoji   "👻"})
+        (h/is-truthy (h/get-by-text qr-label)))))
 
   (h/describe "Fires all events for all types"
     (letfn [(test-fire-events [props test-seq]
@@ -128,86 +44,68 @@
 
       (h/describe "Profile"
         (test-fire-events
-         (merge default-props
-                profile-props)
-         [text-press-event
-          text-long-press-event
-          share-press-event]))
+         {:type :profile}
+         [{:test-name           "Text pressed"
+           :accessibility-label :share-qr-code-info-text
+           :event-name          :press
+           :callback-prop-key   :on-text-press}
+          {:test-name           "Text long pressed"
+           :accessibility-label :share-qr-code-info-text
+           :event-name          :long-press
+           :callback-prop-key   :on-text-long-press}
+          {:test-name           "Share button"
+           :accessibility-label :link-to-profile
+           :event-name          :press
+           :callback-prop-key   :on-share-press}]))
 
       (h/describe "Wallet Legacy"
         (test-fire-events
-         (merge default-props
-                wallet-props
-                {:type    :wallet
-                 :address :legacy
-                 :emoji   "👻"})
-         [text-press-event
-          text-long-press-event
-          share-press-event
-          multichain-press-event
-          legacy-press-event]))
+         {:type :wallet-legacy :emoji "👽"}
+         [{:test-name           "Text pressed"
+           :accessibility-label :share-qr-code-info-text
+           :event-name          :press
+           :callback-prop-key   :on-text-press}
+          {:test-name           "Text long pressed"
+           :accessibility-label :share-qr-code-info-text
+           :event-name          :long-press
+           :callback-prop-key   :on-text-long-press}
+          {:test-name           "Share button pressed"
+           :accessibility-label :link-to-profile
+           :event-name          :press
+           :callback-prop-key   :on-share-press}
+          {:test-name           "Legacy tab pressed"
+           :accessibility-label :share-qr-code-legacy-tab
+           :event-name          :press
+           :callback-prop-key   :on-legacy-press}
+          {:test-name           "Multichain tab pressed"
+           :accessibility-label :share-qr-code-multichain-tab
+           :event-name          :press
+           :callback-prop-key   :on-multichain-press}]))
 
       (h/describe "Wallet Multichain"
         (test-fire-events
-         (merge default-props
-                wallet-props
-                {:type    :wallet
-                 :address :multichain
-                 :emoji   "👻"})
-         [text-press-event
-          text-long-press-event
-          share-press-event
-          legacy-press-event
-          multichain-press-event
-          settings-press-event]))
-
-      (h/describe "Saved Address Legacy"
-        (test-fire-events
-         (merge default-props
-                wallet-props
-                {:type    :saved-address
-                 :address :legacy})
-         [text-press-event
-          text-long-press-event
-          share-press-event
-          legacy-press-event
-          multichain-press-event]))
-
-      (h/describe "Saved Address Multichain"
-        (test-fire-events
-         (merge default-props
-                wallet-props
-                {:type :saved-address :address :multichain})
-         [text-press-event
-          text-long-press-event
-          share-press-event
-          legacy-press-event
-          multichain-press-event
-          settings-press-event]))
-
-      (h/describe "Watched Address Legacy"
-        (test-fire-events
-         (merge default-props
-                wallet-props
-                {:type    :watched-address
-                 :address :legacy
-                 :emoji   "👽"})
-         [text-press-event
-          text-long-press-event
-          share-press-event
-          legacy-press-event
-          multichain-press-event]))
-
-      (h/describe "Watched Address Multichain"
-        (test-fire-events
-         (merge default-props
-                wallet-props
-                {:type    :watched-address
-                 :address :multichain
-                 :emoji   "👽"})
-         [text-press-event
-          text-long-press-event
-          share-press-event
-          legacy-press-event
-          multichain-press-event
-          settings-press-event])))))
+         {:type :wallet-multichain :emoji "👽"}
+         [{:test-name           "Text pressed"
+           :accessibility-label :share-qr-code-info-text
+           :event-name          :press
+           :callback-prop-key   :on-text-press}
+          {:test-name           "Text long pressed"
+           :accessibility-label :share-qr-code-info-text
+           :event-name          :long-press
+           :callback-prop-key   :on-text-long-press}
+          {:test-name           "Share button pressed"
+           :accessibility-label :link-to-profile
+           :event-name          :press
+           :callback-prop-key   :on-share-press}
+          {:test-name           "Legacy tab pressed"
+           :accessibility-label :share-qr-code-legacy-tab
+           :event-name          :press
+           :callback-prop-key   :on-legacy-press}
+          {:test-name           "Multichain tab pressed"
+           :accessibility-label :share-qr-code-multichain-tab
+           :event-name          :press
+           :callback-prop-key   :on-multichain-press}
+          {:test-name           "Settings pressed"
+           :accessibility-label :share-qr-code-settings
+           :event-name          :press
+           :callback-prop-key   :on-settings-press}])))))

src/quo/components/share/share_qr_code/schema.cljs

@@ -1,68 +0,0 @@
-(ns quo.components.share.share-qr-code.schema
-  (:require
-    [quo.foundations.resources :as resources]))
-
-(defn- valid-network?
-  [network]
-  (-> network resources/get-network boolean))
-
-(def ?base
-  [:map
-   [:type [:enum :profile :wallet :saved-address :watched-address]]
-   [:full-name :string]
-   [:qr-image-uri :string]
-   [:qr-data :string]
-   [:on-text-press {:optional true} [:maybe fn?]]
-   [:on-text-long-press {:optional true} [:maybe fn?]]
-   [:on-share-press {:optional true} [:maybe fn?]]
-   [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
-   [:unblur-on-android? {:optional true} [:maybe :boolean]]])
-
-(def ?emoji :string)
-
-(def ?profile
-  [:map
-   [:type [:= :profile]]
-   [:profile-picture :schema.common/image-source]])
-
-(def ?wallet
-  [:map
-   [:type [:= :wallet]]
-   [:emoji {:optional true} [:maybe ?emoji]]])
-
-(def ?address-multichain
-  [:map
-   [:address [:= :multichain]]
-   [:on-settings-press {:optional true} fn?]])
-
-(def ?address-base
-  [:merge
-   [:map
-    [:networks [:sequential [:fn valid-network?]]]
-    [:on-legacy-press {:optional true} [:maybe fn?]]
-    [:on-multichain-press {:optional true} [:maybe fn?]]
-    [:address [:enum :legacy :multichain]]]
-   [:multi {:dispatch :address}
-    [:multichain ?address-multichain]]])
-
-(def ?saved-address
-  [:map
-   [:type [:= :saved-address]]
-   [:on-settings-press {:optional true} fn?]])
-
-(def ?watched-address
-  [:map
-   [:type [:= :watched-address]]
-   [:emoji {:optional true} [:maybe ?emoji]]])
-
-(def ?schema
-  [:=>
-   [:catn
-    [:props
-     [:multi {:dispatch :type}
-      [:profile [:merge ?base ?profile]]
-      [:wallet [:merge ?base ?address-base ?wallet]]
-      [:saved-address [:merge ?base ?address-base ?saved-address]]
-      [:watched-address [:merge ?base ?address-base ?watched-address]]]]]
-   :any])
-

src/quo/components/share/share_qr_code/style.cljs

@@ -106,6 +106,3 @@
   {:color (-> network-short-name
               (get-network-full-name :unknown)
               (colors/resolve-color nil))})
-
-(def watched-account-icon
-  {:margin-left 4})

src/quo/components/share/share_qr_code/view.cljs

@@ -3,25 +3,19 @@
             [clojure.string :as string]
             [oops.core :as oops]
             [quo.components.avatars.account-avatar.view :as account-avatar]
-            [quo.components.avatars.user-avatar.view :as user-avatar]
-            [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
             [quo.components.buttons.button.view :as button]
             [quo.components.gradient.gradient-cover.view :as gradient-cover]
-            [quo.components.icon :as icons]
             [quo.components.markdown.text :as text]
             [quo.components.share.qr-code.view :as qr-code]
-            [quo.components.share.share-qr-code.schema :as component-schema]
             [quo.components.share.share-qr-code.style :as style]
             [quo.components.tabs.tab.view :as tab]
-            [quo.foundations.colors :as colors]
             [quo.theme]
             [react-native.core :as rn]
             [reagent.core :as reagent]
-            [schema.core :as schema]
             [utils.i18n :as i18n]))
 
 (defn- header
-  [{:keys [on-legacy-press on-multichain-press address]}]
+  [{:keys [share-qr-type on-legacy-press on-multichain-press]}]
   [rn/view {:style style/header-container}
    [tab/view
     {:accessibility-label         :share-qr-code-legacy-tab
@@ -29,7 +23,7 @@
      :active-item-container-style style/header-tab-active
      :item-container-style        style/header-tab-inactive
      :size                        24
-     :active                      (= :legacy address)
+     :active                      (= :wallet-legacy share-qr-type)
      :on-press                    on-legacy-press}
     (i18n/label :t/legacy)]
    [rn/view {:style style/space-between-tabs}]
@@ -39,7 +33,7 @@
      :active-item-container-style style/header-tab-active
      :item-container-style        style/header-tab-inactive
      :size                        24
-     :active                      (= :multichain address)
+     :active                      (= :wallet-multichain share-qr-type)
      :on-press                    on-multichain-press}
     (i18n/label :t/multichain)]])
 
@@ -127,69 +121,77 @@
      :on-press            on-settings-press}
     :i/advanced]])
 
-(defn- header-icon
-  [{:keys [share-qr-type customization-color emoji profile-picture full-name]}]
-  (case share-qr-type
-    :profile                   [user-avatar/user-avatar
-                                {:size                :small
-                                 :status-indicator?   false
-                                 :profile-picture     profile-picture
-                                 :customization-color customization-color}]
-    (:wallet :watched-address) [account-avatar/view
-                                {:customization-color customization-color
-                                 :emoji               emoji
-                                 :size                32}]
-    :saved-address             [wallet-user-avatar/wallet-user-avatar
-                                {:size                :size-32
-                                 :customization-color customization-color
-                                 :full-name           full-name}]
-    nil))
-
 (defn- share-qr-code
   [{:keys [share-qr-type qr-image-uri component-width customization-color full-name
-           profile-picture emoji on-share-press address]
+           profile-picture emoji on-share-press]
     :as   props}]
   [:<>
    [rn/view {:style style/gradient-bg}
     [gradient-cover/view {:customization-color customization-color :height 463}]]
    [rn/view {:style style/content-container}
-    [rn/view {:style style/share-qr-container}
-     [rn/view {:style style/share-qr-inner-container}
-      [header-icon props]
+    [rn/view
+     {:style style/share-qr-container}
+     [rn/view
+      {:style style/share-qr-inner-container}
+      [account-avatar/view
+       {:customization-color customization-color
+        :emoji               emoji
+        :size                32}]
       [text/text
        {:size   :heading-2
         :weight :semi-bold
-        :style  {:margin-left 8}} full-name]
-      (when (= share-qr-type :watched-address)
-        [icons/icon
-         :i/reveal
-         {:color           colors/white-opa-40
-          :container-style style/watched-account-icon}])]
+        :style  {:margin-left 8}} full-name]]
      [share-button {:on-press on-share-press}]]
-    (when (not= share-qr-type :profile)
+    (when (#{:wallet-legacy :wallet-multichain} share-qr-type)
       [header props])
     [quo.theme/provider {:theme :light}
      [qr-code/view
       {:qr-image-uri        qr-image-uri
        :size                (style/qr-code-size component-width)
-       :avatar              (case share-qr-type
-                              :profile                   :profile
-                              (:watched-address :wallet) :wallet-account
-                              :saved-address             :saved-address
-                              nil)
+       :avatar              (if (= share-qr-type :profile)
+                              :profile
+                              :wallet-account)
        :customization-color customization-color
        :full-name           full-name
        :profile-picture     profile-picture
        :emoji               emoji}]]
     [rn/view {:style style/bottom-container}
-     (if (= share-qr-type :profile)
-       [profile-bottom props]
-       (case address
-         :legacy     [wallet-legacy-bottom props]
-         :multichain [wallet-multichain-bottom props]
-         nil))]]])
+     (case share-qr-type
+       :profile           [profile-bottom props]
+       :wallet-legacy     [wallet-legacy-bottom props]
+       :wallet-multichain [wallet-multichain-bottom props]
+       nil)]]])
 
 (defn- view-internal
+  "Receives the following properties:
+   - type:                :profile | :wallet-legacy | :wallet-multichain
+   - qr-image-uri:        Image source value.
+   - qr-data:             Text to show below the QR code.
+   - on-text-press:       Callback for the `qr-data` text.
+   - on-text-long-press:  Callback for the `qr-data` text.
+   - on-share-press:      Callback for the share button.
+   - customization-color: Custom color for the QR code component.
+   - unblur-on-android?:  [Android only] disables blur for this component.
+
+   Depending on the `type`, different properties are accepted:
+   `:profile`
+     - full-name:       User full name.
+     - profile-picture: map ({:source image-source}) or any image source.
+   `:wallet-legacy`
+     - emoji:               Emoji in a string to show in the QR code.
+     - on-legacy-press:     Callback for the legacy tab.
+     - on-multichain-press: Callback for the multichain tab.
+   `:wallet-multichain`
+     - networks:            A vector of network names as keywords (`[:ethereum, :my-net, ...]`).
+     - on-settings-press:   Callback for the settings button.
+     - emoji:               Emoji in a string to show in the QR code.
+     - on-legacy-press:     Callback for the legacy tab.
+     - on-multichain-press: Callback for the multichain tab.
+
+     WARNING on Android:
+     Sometimes while using a blur layer on top of another on Android, this component looks
+     bad because of the `blur/view`, so we can set `unblur-on-android? true` to fix it.
+     "
   [props]
   (reagent/with-let [component-width     (reagent/atom nil)
                      container-component [rn/view {:background-color style/overlay-color}]]
@@ -205,6 +207,5 @@
                    (assoc :component-width @component-width)
                    (clojure.set/rename-keys {:type :share-qr-type}))]))]]))
 
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal component-schema/?schema)))
+
+(def view (quo.theme/with-theme view-internal))

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/account_card/component_spec.cljs

@@ -5,7 +5,6 @@
 
 (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?]}]
@@ -22,54 +21,54 @@
 (h/describe "Account_card tests"
   (h/test "Renders Default"
     (let [data (get-test-data {:type :default})]
-      (h/render-with-theme-provider [account-card/view data] theme)
+      (h/render [account-card/view data])
       (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-with-theme-provider [account-card/view data] theme)
+      (h/render [account-card/view data])
       (h/is-truthy (h/get-by-text username))))
 
   (h/test "Renders Add-Account"
     (let [data {:type :add-account}]
-      (h/render-with-theme-provider [account-card/view data] theme)
+      (h/render [account-card/view data])
       (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-with-theme-provider [account-card/view data] theme)
+      (h/render [account-card/view data])
       (h/is-truthy (h/get-by-text empty-username))))
 
   (h/test "Renders Missing Keypair"
     (let [data (get-test-data {:type :missing-keypair})]
-      (h/render-with-theme-provider [account-card/view data] theme)
+      (h/render [account-card/view data])
       (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-with-theme-provider [account-card/view data] theme)
+      (h/render [account-card/view data])
       (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-with-theme-provider [account-card/view data] theme)
+      (h/render [account-card/view data])
       (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-with-theme-provider [account-card/view data] theme)
+      (h/render [account-card/view data])
       (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-with-theme-provider [account-card/view data] theme)
+      (h/render [account-card/view data])
       (h/is-falsy (h/query-by-label-text :metrics)))))

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

@@ -1,33 +0,0 @@
-(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,15 +4,13 @@
     [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]
-    [schema.core :as schema]))
+    [reagent.core :as reagent]))
 
 (defn- loading-view
   [{:keys [customization-color type theme metrics?]}]
@@ -185,6 +183,4 @@
     :add-account                                   [add-account-view props]
     nil))
 
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal component-schema/?schema)))
+(def view (quo.theme/with-theme view-internal))

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

@@ -3,104 +3,92 @@
     [quo.core :as quo]
     [test-helpers.component :as h]))
 
-(def ^:private theme :light)
-
 (h/describe "account origin tests"
   (h/test "component renders"
-    (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"}]
-                                  theme)
+    (h/render [quo/account-origin
+               {:type            :recovery-phrase
+                :stored          :on-keycard
+                :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
+                :user-name       "Test Name"}])
     (-> (h/expect (h/get-by-translation-text :t/origin))
         (.toBeTruthy)))
 
   (h/test "recovery phrase icon is visible when :type is :recovery-phrase"
-    (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"}]
-                                  theme)
+    (h/render [quo/account-origin
+               {:type            :recovery-phrase
+                :stored          :on-keycard
+                :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
+                :user-name       "Test Name"}])
     (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-with-theme-provider [quo/account-origin
-                                   {:type            :recovery-phrase
-                                    :stored          :on-keycard
-                                    :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
-                                    :user-name       "Test Name"}]
-                                  theme)
+    (h/render [quo/account-origin
+               {:type            :recovery-phrase
+                :stored          :on-keycard
+                :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
+                :user-name       "Test Name"}])
     (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-with-theme-provider [quo/account-origin
-                                   {:type            :private-key
-                                    :stored          :on-keycard
-                                    :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
-                                    :user-name       "Test Name"}]
-                                  theme)
+    (h/render [quo/account-origin
+               {:type            :private-key
+                :stored          :on-keycard
+                :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
+                :user-name       "Test Name"}])
     (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-with-theme-provider [quo/account-origin
-                                   {:type            :default-keypair
-                                    :stored          :on-keycard
-                                    :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
-                                    :user-name       "Test Name"}]
-                                  theme)
+    (h/render [quo/account-origin
+               {:type            :default-keypair
+                :stored          :on-keycard
+                :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
+                :user-name       "Test Name"}])
     (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-with-theme-provider [quo/account-origin
-                                   {:type            :recovery-phrase
-                                    :stored          :on-keycard
-                                    :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
-                                    :user-name       "Test Name"}]
-                                  theme)
+    (h/render [quo/account-origin
+               {:type            :recovery-phrase
+                :stored          :on-keycard
+                :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
+                :user-name       "Test Name"}])
     (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-with-theme-provider [quo/account-origin
-                                   {:type            :recovery-phrase
-                                    :stored          :on-device
-                                    :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
-                                    :user-name       "Test Name"}]
-                                  theme)
+    (h/render [quo/account-origin
+               {:type            :recovery-phrase
+                :stored          :on-device
+                :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
+                :user-name       "Test Name"}])
     (-> (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-with-theme-provider [quo/account-origin
-                                   {:type            :recovery-phrase
-                                    :stored          :on-keycard
-                                    :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
-                                    :user-name       "Test Name"}]
-                                  theme)
+    (h/render [quo/account-origin
+               {:type            :recovery-phrase
+                :stored          :on-keycard
+                :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
+                :user-name       "Test Name"}])
     (-> (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-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}]
-                                    theme)
+      (h/render [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}])
       (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-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}]
-                                    theme)
+      (h/render [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}])
       (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

@@ -1,30 +0,0 @@
-(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,12 +3,10 @@
     [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
@@ -109,5 +107,14 @@
        [card-view theme derivation-path secondary-color on-press])]))
 
 (def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal component-schema/?schema)))
+  "Create an account-origin UI component.
+  | key                   | values                                         |
+  | ----------------------|------------------------------------------------|
+  | :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

@@ -1,20 +0,0 @@
-(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,12 +2,10 @@
   (: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
@@ -131,5 +129,16 @@
            [numeric-changes percentage-change currency-change customization-color theme up?])]])]))
 
 (def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal component-schema/?schema)))
+  "Create a account-overview UI component.
+     | key          | description |
+  | -------------|-------------|
+  | `: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/component_spec.cljs

@@ -42,22 +42,18 @@
     (render [account-permissions/view
              {:account       account
               :token-details [{:token  "SNT"
-                               :amount "100"
-                               :type   :token}]}])
+                               :amount "100"}]}])
     (h/is-truthy (h/get-by-text "100 SNT")))
 
   (h/test "render with multiple token details"
     (render [account-permissions/view
              {:account       account
               :token-details [{:token  "SNT"
-                               :amount "100"
-                               :type   :token}
+                               :amount "100"}
                               {:token  "ETH"
-                               :amount "18"
-                               :type   :token}
+                               :amount "18"}
                               {:token  "BTM"
-                               :amount "1000"
-                               :type   :token}]}])
+                               :amount "1000"}]}])
     (h/is-truthy (h/get-by-text "100 SNT"))
     (h/is-truthy (h/get-by-text "18 ETH"))
     (h/is-truthy (h/get-by-text "1000 BTM")))

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

@@ -1,22 +0,0 @@
-(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 [: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])

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

@@ -4,7 +4,6 @@
             [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]
@@ -14,6 +13,26 @@
             [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 [: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])
+
 (defn- token-details-section
   [tokens]
   (when tokens
@@ -28,16 +47,14 @@
          (i18n/label :t/no-relevant-tokens)]
 
         (let [token-length (dec (count tokens))]
-          (map-indexed (fn [idx {:keys [type token amount collectible-name collectible-img-src]}]
+          (map-indexed (fn [idx {:keys [token amount]}]
                          ^{:key idx}
                          [required-tokens/view
-                          {:container-style     style/token-and-text
-                           :type                type
-                           :amount              amount
-                           :token               token
-                           :collectible-img-src collectible-img-src
-                           :collectible-name    collectible-name
-                           :divider?            (not= token-length idx)}])
+                          {:container-style style/token-and-text
+                           :type            :token
+                           :amount          amount
+                           :token           token
+                           :divider?        (not= token-length idx)}])
                        tokens)))]]))
 
 (defn- view-internal
@@ -76,4 +93,4 @@
 
 (def view
   (quo.theme/with-theme
-   (schema/instrument #'view-internal component-schema/?schema)))
+   (schema/instrument #'view-internal ?schema)))

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

@@ -1,14 +0,0 @@
-(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,10 +1,8 @@
 (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
@@ -30,6 +28,4 @@
       (into [text/text] network-text-xf $)
       (conj $ address-text))))
 
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal component-schema/?schema)))
+(def view (quo.theme/with-theme view-internal))

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

@@ -1,115 +1,99 @@
 (ns quo.components.wallet.confirmation-progress.component-spec
   (:require [quo.core :as quo]
+            [reagent.core :as reagent]
             [test-helpers.component :as h]))
 
-
 (defn- get-test-data
   [{:keys [state network]
     :or   {state :pending network :mainnet}}]
-  {:counter             0
+  {:counter             (reagent/atom 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-with-theme-provider [quo/confirmation-propgress
-                                   (get-test-data {:state   :sending
-                                                   :network :optimism})])
-    (h/is-truthy (h/get-by-label-text :progress-box))))
+    (h/render [quo/confirmation-propgress
+               (get-test-data {:state   :sending
+                               :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})])
-  (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
+               (get-test-data {:state   :confirmed
+                               :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})])
-  (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
+               (get-test-data {:state   :finalising
+                               :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})])
-  (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
+               (get-test-data {:state   :finalized
+                               :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})])
-  (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
+               (get-test-data {:state   :error
+                               :network :optimism})])
+    (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 [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 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 [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 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 [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 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 [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 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 [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 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 [quo/confirmation-propgress (get-test-data {})])
+    (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 [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 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 [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 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 [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 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 [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 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 [quo/confirmation-propgress (get-test-data {:state :error})])
+    (h/is-truthy (h/get-by-label-text :mainnet-progress-box))))

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

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

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

@@ -3,8 +3,6 @@
     [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
@@ -25,45 +23,41 @@
 
 (h/describe "Wallet: Keypair"
   (h/test "Default keypair title renders"
-    (h/render-with-theme-provider [keypair/view
-                                   {:accounts            accounts
-                                    :customization-color :blue
-                                    :type                :default-keypair
-                                    :stored              :on-device
-                                    :action              :selector
-                                    :details             default-details}]
-                                  theme)
+    (h/render [keypair/view
+               {:accounts            accounts
+                :customization-color :blue
+                :type                :default-keypair
+                :stored              :on-device
+                :action              :selector
+                :details             default-details}])
     (h/is-truthy (h/get-by-label-text :title)))
 
   (h/test "On device renders"
-    (h/render-with-theme-provider [keypair/view
-                                   {:accounts            accounts
-                                    :customization-color :blue
-                                    :type                :other
-                                    :stored              :on-device
-                                    :action              :selector
-                                    :details             other-details}]
-                                  theme)
+    (h/render [keypair/view
+               {:accounts            accounts
+                :customization-color :blue
+                :type                :other
+                :stored              :on-device
+                :action              :selector
+                :details             other-details}])
     (h/is-truthy (h/get-by-label-text :details)))
 
   (h/test "Selector action renders"
-    (h/render-with-theme-provider [keypair/view
-                                   {:accounts            accounts
-                                    :customization-color :blue
-                                    :type                :other
-                                    :stored              :on-keycard
-                                    :action              :selector
-                                    :details             other-details}]
-                                  theme)
+    (h/render [keypair/view
+               {:accounts            accounts
+                :customization-color :blue
+                :type                :other
+                :stored              :on-keycard
+                :action              :selector
+                :details             other-details}])
     (h/is-truthy (h/get-by-label-text :radio-on)))
 
   (h/test "Options action renders"
-    (h/render-with-theme-provider [keypair/view
-                                   {:accounts            accounts
-                                    :customization-color :blue
-                                    :type                :other
-                                    :stored              :on-keycard
-                                    :action              :options
-                                    :details             other-details}]
-                                  theme)
+    (h/render [keypair/view
+               {:accounts            accounts
+                :customization-color :blue
+                :type                :other
+                :stored              :on-keycard
+                :action              :options
+                :details             other-details}])
     (h/is-truthy (h/get-by-label-text :options-button))))

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/required_tokens/view.cljs

@@ -15,7 +15,7 @@
       [:amount {:optional true} [:maybe [:or :string :int]]]
       [:token {:optional true} [:maybe :string]]
       [:token-img-src {:optional true} [:maybe :schema.common/image-source]]
-      [:collectible-img-src {:optional true} [:maybe :schema.common/image-source]]
+      [:collectible-img-src {:optional true} :schema.common/image-source]
       [:collectible-name {:optional true} [:maybe :string]]
       [:divider? {:optional true} [:maybe :boolean]]
       [:theme :schema.common/theme]

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

@@ -1,5 +1,6 @@
 (ns quo.components.wallet.transaction-progress.component-spec
   (:require [quo.core :as quo]
+            [reagent.core :as reagent]
             [test-helpers.component :as h]))
 
 (defn- get-test-data
@@ -7,228 +8,193 @@
     :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      0
+                          :counter      (reagent/atom 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-with-theme-provider
-     [quo/transaction-progress])
+    (h/render [quo/transaction-progress])
     (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 [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
     (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 [quo/transaction-progress
+               (get-test-data {:state   :sending
+                               :network :optimism-arbitrum})])
     (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 [quo/transaction-progress
+               (get-test-data {:state   :confirmed
+                               :network :optimism-arbitrum})])
     (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 [quo/transaction-progress
+               (get-test-data {:state   :finalising
+                               :network :optimism-arbitrum})])
     (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 [quo/transaction-progress
+               (get-test-data {:state   :finalized
+                               :network :optimism-arbitrum})])
     (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 [quo/transaction-progress
+               (get-test-data {:state   :error
+                               :network :optimism-arbitrum})])
     (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 [quo/transaction-progress
+               (get-test-data {:state   :sending
+                               :network :optimism})])
     (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 [quo/transaction-progress
+               (get-test-data {:state   :confirmed
+                               :network :optimism})])
     (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 [quo/transaction-progress
+               (get-test-data {:state   :finalising
+                               :network :optimism})])
     (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 [quo/transaction-progress
+               (get-test-data {:state   :finalized
+                               :network :optimism})])
     (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 [quo/transaction-progress
+               (get-test-data {:state   :error
+                               :network :optimism})])
     (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 [quo/transaction-progress
+               (get-test-data {:state   :sending
+                               :network :arbitrum})])
     (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 [quo/transaction-progress
+               (get-test-data {:state   :confirmed
+                               :network :arbitrum})])
     (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 [quo/transaction-progress
+               (get-test-data {:state   :finalising
+                               :network :arbitrum})])
     (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 [quo/transaction-progress
+               (get-test-data {:state   :finalized
+                               :network :arbitrum})])
     (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 [quo/transaction-progress
+               (get-test-data {:state   :error
+                               :network :arbitrum})])
     (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 [quo/transaction-progress (get-test-data {})])
     (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 [quo/transaction-progress (get-test-data {:state :sending})])
     (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 [quo/transaction-progress (get-test-data {:state :confirmed})])
     (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 [quo/transaction-progress (get-test-data {:state :finalising})])
     (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 [quo/transaction-progress (get-test-data {:state :finalized})])
     (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 [quo/transaction-progress (get-test-data {:state :error})])
     (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 [quo/transaction-progress (get-test-data {})])
     (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 [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
     (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 [quo/transaction-progress (get-test-data {:network :arbitrum})])
     (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 [quo/transaction-progress (get-test-data {:network :optimism})])
     (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 [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
     (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 [quo/transaction-progress (get-test-data {})])
     (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 [quo/transaction-progress (get-test-data {:network :optimism})])
     (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 [quo/transaction-progress (get-test-data {:network :arbitrum})])
     (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 [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
     (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 [quo/transaction-progress (get-test-data {})])
     (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 [quo/transaction-progress (get-test-data {:network :optimism})])
     (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/render [quo/transaction-progress (get-test-data {:network :arbitrum})])
     (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/schema/common.cljs

@@ -22,7 +22,7 @@
    {:min 1}
    [:map
     {:closed true}
-    [:method [:or :keyword :string]]
+    [:method :string]
     [:params [:sequential :any]]
     [:js-response {:optional true} :any]
     [:on-success [:or fn? [:cat keyword? [:* :any]]]]

src/status_im/common/qr_codes/view.cljs

@@ -54,43 +54,38 @@
 
 (defn share-qr-code
   "Receives the following properties:
-     - type:                  :profile | :wallet | :saved-address | :watched-address
-     - qr-image-uri:          Image source value.
-     - qr-data:               Text to show below the QR code.
-     - on-text-press:         Callback for the `qr-data` text.
-     - on-text-long-press:    Callback for the `qr-data` text.
-     - on-share-press:        Callback for the share button.
-     - customization-color:   Custom color for the QR code component.
-     - unblur-on-android?:    [Android only] disables blur for this component.
-     - full-name:             User full name.
-  
-     Depending on the `type`, different properties are accepted:
-     `:profile`
-       - profile-picture:     map ({:source image-source}) or any image source.
-     `:wallet`
-       - networks:            A vector of network names as keywords (`[:ethereum, :my-net, ...]`).
-       - emoji:               Emoji in a string to show in the QR code.
-       - on-legacy-press:     Callback for the legacy tab.
-       - on-multichain-press: Callback for the multichain tab.
-       - address:             :legacy | :multichain
-     `:saved-address`
-       - networks:            A vector of network names as keywords (`[:ethereum, :my-net, ...]`).
-       - on-settings-press:   Callback for the settings button.
-       - on-legacy-press:     Callback for the legacy tab.
-       - address:             :legacy | :multichain
-       - on-multichain-press: Callback for the multichain tab.
-     `:watched-address`
-       - networks:            A vector of network names as keywords (`[:ethereum, :my-net, ...]`).
-       - on-settings-press:   Callback for the settings button.
-       - emoji:               Emoji in a string to show in the QR code.
-       - on-legacy-press:     Callback for the legacy tab.
-       - address:             :legacy | :multichain
-       - on-multichain-press: Callback for the multichain tab."
-  [{:keys         [qr-data qr-data-label-shown networks address]
+   - type:                :profile | :wallet-legacy | :wallet-multichain
+   - qr-data:             Text to encode in the QR code
+   - qr-data-label-shown: Text to show below the QR code
+   - on-text-press:       Callback for the `qr-data-label-shown` text.
+   - on-text-long-press:  Callback for the `qr-data-label-shown` text.
+   - on-share-press:      Callback for the share button.
+   - customization-color: Custom color for the QR code component.
+   - unblur-on-android?:  [Android only] disables blur for this component.
+
+   Depending on the `type`, different properties are accepted:
+   `:profile`
+     - full-name:       User full name.
+     - profile-picture: map ({:source image-source}) or any image source.
+   `:wallet-legacy`
+     - emoji:               Emoji in a string to show in the QR code.
+     - on-info-press:       Callback for the info icon.
+     - on-legacy-press:     Callback for the legacy tab.
+     - on-multichain-press: Callback for the multichain tab.
+   `:wallet-multichain`
+     - networks:            A vector of network names (`[:ethereum, :optimism, :my-net, ,,,]`)
+                            they will add network prefixes to the address in
+                            `qr-data-label-shown` and the QR code generated.
+     - on-settings-press:   Callback for the settings button.
+     - emoji:               Emoji in a string to show in the QR code.
+     - on-info-press:       Callback for the info icon.
+     - on-legacy-press:     Callback for the legacy tab.
+     - on-multichain-press: Callback for the multichain tab."
+  [{:keys         [qr-data qr-data-label-shown networks]
     share-qr-type :type
     :as           props}]
   (let [label               (or qr-data-label-shown qr-data)
-        string-to-encode    (if (and (= share-qr-type :wallet) (= address :multichain))
+        string-to-encode    (if (= share-qr-type :wallet-multichain)
                               (get-qr-data-for-wallet-multichain qr-data networks)
                               qr-data)
         qr-media-server-uri (image-server/get-qr-image-uri-for-any-url

src/status_im/common/toasts/style.cljs

@@ -1,11 +1,9 @@
-(ns status-im.common.toasts.style
-  (:require [react-native.safe-area :as safe-area]))
+(ns status-im.common.toasts.style)
 
-(defn outmost-transparent-container
-  []
+(def outmost-transparent-container
   {:elevation       2
    :pointer-events  :box-none
-   :padding-top     (+ (safe-area/get-top) 6)
+   :padding-top     52
    :flex-direction  :column
    :justify-content :center
    :align-items     :center})

src/status_im/common/toasts/view.cljs

@@ -60,5 +60,5 @@
   []
   (->> (rf/sub [:toasts])
        :ordered
-       (into [rn/view {:style (style/outmost-transparent-container)}]
+       (into [rn/view {:style style/outmost-transparent-container}]
              (map #(with-meta [:f> f-container %] {:key %})))))

src/status_im/constants.cljs

@@ -159,9 +159,6 @@
     community-token-permission-become-token-master
     community-token-permission-become-token-owner})
 
-(def ^:const community-token-type-erc20 1)
-(def ^:const community-token-type-erc721 2)
-
 ;; Community rules for joining
 (def ^:const community-rule-ens-only "ens-only")
 

src/status_im/contexts/chat/messenger/composer/actions/view.cljs

@@ -153,19 +153,19 @@
                                                   50)}]))
        :max-duration-ms                    constants/audio-max-duration-ms}]]))
 
-(defn photo-limit-toast
+(defn images-limit-toast
   []
   (rf/dispatch [:toasts/upsert
-                {:id   :random-id
-                 :type :negative
-                 :text (i18n/label :t/hit-photos-limit
-                                   {:max-photos constants/max-album-photos})}]))
+                {:id              :random-id
+                 :type            :negative
+                 :container-style {:top (when platform/ios? 20)}
+                 :text            (i18n/label :t/only-6-images)}]))
 
 
 (defn go-to-camera
   [images-count]
   (device-permissions/camera #(if (>= images-count constants/max-album-photos)
-                                (photo-limit-toast)
+                                (images-limit-toast)
                                 (rf/dispatch [:navigate-to :camera-screen]))))
 
 (defn camera-button

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/chat/messenger/messages/transport/events.cljs

@@ -55,7 +55,6 @@
         ^js identity-images            (.-identityImages response-js)
         ^js accounts                   (.-accounts response-js)
         ^js ens-username-details-js    (.-ensUsernameDetails response-js)
-        ^js customization-color-js     (.-customizationColor response-js)
         sync-handler                   (when-not process-async process-response)]
     (cond
 
@@ -205,14 +204,7 @@
         (js-delete response-js "ensUsernameDetails")
         (rf/merge cofx
                   (process-next response-js sync-handler)
-                  (rf/dispatch [:ens/update-usernames ens-username-details-clj])))
-
-      (seq customization-color-js)
-      (let [customization-color (types/js->clj customization-color-js)]
-        (js-delete response-js "customizationColor")
-        (rf/merge cofx
-                  (process-next response-js sync-handler)
-                  (rf/dispatch [:profile/save-local-accent-color (keyword customization-color)]))))))
+                  (rf/dispatch [:ens/update-usernames ens-username-details-clj]))))))
 
 (defn group-by-and-update-unviewed-counts
   "group messages by current chat, profile updates, transactions and update unviewed counters in db for not curent chats"

src/status_im/contexts/chat/messenger/photo_selector/style.cljs

@@ -75,6 +75,3 @@
   {:position :absolute
    :top      8
    :right    8})
-
-(def photo-limit-toast-container
-  {:top (if platform/ios? 6 16)})

src/status_im/contexts/chat/messenger/photo_selector/view.cljs

@@ -4,6 +4,7 @@
     [react-native.core :as rn]
     [react-native.gesture :as gesture]
     [react-native.linear-gradient :as linear-gradient]
+    [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
@@ -16,14 +17,13 @@
 
 (def min-scroll-to-blur 5)
 
-(defn show-photo-limit-toast
+(defn show-toast
   []
   (rf/dispatch [:toasts/upsert
                 {:id              :random-id
                  :type            :negative
-                 :container-style style/photo-limit-toast-container
-                 :text            (i18n/label :t/hit-photos-limit
-                                              {:max-photos constants/max-album-photos})}]))
+                 :container-style {:top (when platform/ios? 20)}
+                 :text            (i18n/label :t/only-6-images)}]))
 
 (defn on-press-confirm-selection
   [selected close]
@@ -74,7 +74,7 @@
                              (if item-selected?
                                (swap! selected remove-selected item)
                                (if (>= (count @selected) constants/max-album-photos)
-                                 (show-photo-limit-toast)
+                                 (show-toast)
                                  (swap! selected conj item))))
       :accessibility-label (str "image-" index)}
      [rn/image

src/status_im/contexts/communities/actions/accounts_selection/view.cljs

@@ -18,7 +18,7 @@
                                           {:community-id id :password %}])}])
   (rf/dispatch [:navigate-back]))
 
-(defn view
+(defn f-view-internal
   []
   (let [{id :community-id}                (rf/sub [:get-screen-params])
         {:keys [name color images]}       (rf/sub [:communities/community id])
@@ -83,3 +83,7 @@
         :track-icon          :i/face-id
         :customization-color color
         :on-complete         #(join-community-and-navigate-back id)}]]]))
+
+(defn view
+  []
+  [:f> f-view-internal])

src/status_im/contexts/communities/actions/addresses_for_permissions/events.cljs

@@ -1,58 +0,0 @@
-(ns status-im.contexts.communities.actions.addresses-for-permissions.events
-  (:require
-    [schema.core :as schema]
-    [taoensso.timbre :as log]
-    [utils.re-frame :as rf]))
-
-(defn get-permissioned-balances
-  [{[event-id _] :original-event} [community-id]]
-  {:fx [[:json-rpc/call
-         [{:method     :wakuext_getCommunityPermissionedBalances
-           :params     [{:communityId community-id}]
-           :on-success [:communities/get-permissioned-balances-success community-id]
-           :on-error   (fn [error]
-                         (log/error "failed to get balances"
-                                    {:community-id community-id
-                                     :event        event-id
-                                     :error        error}))}]]]})
-
-(schema/=> get-permissioned-balances
-  [:=>
-   [:catn
-    [:cofx :schema.re-frame/cofx]
-    [:args [:schema [:catn [:community-id :string]]]]]
-   [:map {:closed true}
-    [:fx
-     [:tuple
-      [:tuple [:= :json-rpc/call] :schema.common/rpc-call]]]]])
-
-(rf/reg-event-fx :communities/get-permissioned-balances get-permissioned-balances)
-
-(defn get-permissioned-balances-success
-  [{:keys [db]} [community-id response]]
-  {:db (assoc-in db [:communities/permissioned-balances community-id] response)})
-
-(def ^:private ?account-address keyword?)
-
-(def ^:private ?permissioned-balances-response
-  [:map-of
-   ?account-address
-   [:sequential
-    [:map
-     [:type int?]
-     [:symbol string?]
-     [:decimals int?]
-     [:amount string?]]]])
-
-(schema/=> get-permissioned-balances-success
-  [:=>
-   [:catn
-    [:cofx :schema.re-frame/cofx]
-    [:args
-     [:schema
-      [:catn
-       [:community-id string?]
-       [:response ?permissioned-balances-response]]]]]
-   map?])
-
-(rf/reg-event-fx :communities/get-permissioned-balances-success get-permissioned-balances-success)

src/status_im/contexts/communities/actions/addresses_for_permissions/events_test.cljs

@@ -1,15 +0,0 @@
-(ns status-im.contexts.communities.actions.addresses-for-permissions.events-test
-  (:require
-    [cljs.test :refer [deftest is]]
-    [status-im.contexts.communities.actions.addresses-for-permissions.events :as sut]))
-
-(def community-id "0x1")
-
-(deftest get-permissioned-balances-test
-  (let [cofx {:db {}}]
-    (is (match? {:fx [[:json-rpc/call
-                       [{:method     :wakuext_getCommunityPermissionedBalances
-                         :params     [{:communityId community-id}]
-                         :on-success [:communities/get-permissioned-balances-success community-id]
-                         :on-error   fn?}]]]}
-                (sut/get-permissioned-balances cofx [community-id])))))

src/status_im/contexts/communities/actions/addresses_for_permissions/style.cljs

@@ -8,6 +8,12 @@
    :padding-horizontal 20
    :padding-vertical   12})
 
+(def error-message
+  {:flex-direction  :row
+   :gap             4
+   :justify-content :center
+   :margin-bottom   8})
+
 (def highest-role
   {:flex-direction  :row
    :gap             4

src/status_im/contexts/communities/actions/addresses_for_permissions/view.cljs

@@ -3,111 +3,90 @@
             [quo.foundations.colors :as colors]
             [react-native.core :as rn]
             [status-im.common.not-implemented :as not-implemented]
-            [status-im.common.resources :as resources]
-            [status-im.constants :as constants]
             [status-im.contexts.communities.actions.addresses-for-permissions.style :as style]
             [status-im.contexts.communities.utils :as communities.utils]
             [utils.i18n :as i18n]
-            [utils.money :as money]
             [utils.re-frame :as rf]))
 
-(defn- balances->components-props
-  [balances]
-  (for [{:keys [amount decimals type name] :as balance} balances]
-    (cond-> balance
-      true
-      (assoc :type
-             (condp = type
-               constants/community-token-type-erc20  :token
-               constants/community-token-type-erc721 :collectible
-               :token))
-
-      (= type constants/community-token-type-erc721)
-      (assoc :collectible-name    name
-             :collectible-img-src (resources/get-mock-image :collectible))
-
-      (= type constants/community-token-type-erc20)
-      (assoc :amount (str (money/with-precision (money/token->unit amount decimals) 3))
-             :token  (:symbol balance)))))
-
 (defn- account-item
-  [{:keys [customization-color address name emoji]} _ _ [selected-addresses community-id]]
-  (let [balances (rf/sub [:communities/permissioned-balances-by-address community-id address])]
-    [quo/account-permissions
-     {:account         {:name                name
-                        :address             address
-                        :emoji               emoji
-                        :customization-color customization-color}
-      :token-details   (balances->components-props balances)
-      :checked?        (contains? selected-addresses address)
-      :on-change       #(rf/dispatch [:communities/toggle-selected-permission-address
-                                      address community-id])
-      :container-style {:margin-bottom 8}}]))
+  [item _ _ [selected-addresses community-id]]
+  [quo/account-permissions
+   {:account         {:name                (:name item)
+                      :address             (:address item)
+                      :emoji               (:emoji item)
+                      :customization-color (:customization-color item)}
+    :token-details   []
+    :checked?        (contains? selected-addresses (:address item))
+    :on-change       #(rf/dispatch [:communities/toggle-selected-permission-address
+                                    (:address item) community-id])
+    :container-style {:margin-bottom 8}}])
 
 (defn view
   []
-  (let [{id :community-id} (rf/sub [:get-screen-params])]
-    (rf/dispatch [:communities/get-permissioned-balances id])
-    (fn []
-      (let [{:keys [name color images]}       (rf/sub [:communities/community id])
-            {:keys [highest-permission-role]} (rf/sub [:community/token-gated-overview id])
-            accounts                          (rf/sub [:wallet/accounts-with-customization-color])
-            selected-addresses                (rf/sub [:communities/selected-permission-addresses id])
-            highest-role-text                 (when highest-permission-role
-                                                (i18n/label (communities.utils/role->translation-key
-                                                             highest-permission-role)))]
-        [rn/safe-area-view {:style style/container}
-         [quo/drawer-top
-          {:type                :context-tag
-           :title               (i18n/label :t/addresses-for-permissions)
-           :context-tag-type    :community
-           :community-name      name
-           :button-icon         :i/info
-           :on-button-press     not-implemented/alert
-           :community-logo      (get-in images [:thumbnail :uri])
-           :customization-color color}]
+  (let [{id :community-id} (rf/sub [:get-screen-params])
+        {:keys [name color images]} (rf/sub [:communities/community id])
+        {:keys [highest-permission-role]} (rf/sub [:community/token-gated-overview id])
+        accounts (rf/sub [:wallet/accounts-with-customization-color])
+        selected-addresses (rf/sub [:communities/selected-permission-addresses id])
+        highest-role-text
+        (i18n/label
+         (communities.utils/role->translation-key highest-permission-role))]
+    [rn/safe-area-view {:style style/container}
+     [quo/drawer-top
+      {:type                :context-tag
+       :title               (i18n/label :t/addresses-for-permissions)
+       :context-tag-type    :community
+       :community-name      name
+       :button-icon         :i/info
+       :on-button-press     not-implemented/alert
+       :community-logo      (get-in images [:thumbnail :uri])
+       :customization-color color}]
 
-         [rn/flat-list
-          {:render-fn               account-item
-           :render-data             [selected-addresses id]
-           :content-container-style {:padding 20}
-           :key-fn                  :address
-           :data                    accounts}]
+     [rn/flat-list
+      {:render-fn               account-item
+       :render-data             [selected-addresses id]
+       :content-container-style {:padding 20}
+       :key-fn                  :address
+       :data                    accounts}]
 
-         (if (and highest-permission-role (seq selected-addresses))
-           [rn/view
-            {:style style/highest-role}
-            [quo/text
-             {:size  :paragraph-2
-              :style {:color colors/neutral-50}}
-             (i18n/label :t/eligible-to-join-as)]
-            [quo/context-tag
-             {:type    :icon
-              :icon    :i/members
-              :size    24
-              :context highest-role-text}]]
-           [quo/info-message
-            {:type  :error
-             :size  :default
-             :icon  :i/info
-             :style {:justify-content :center}}
-            (if (empty? selected-addresses)
-              (i18n/label :t/no-addresses-selected)
-              (i18n/label :t/addresses-dont-contain-tokens-needed))])
+     (when (and highest-permission-role (seq selected-addresses))
+       [rn/view
+        {:style style/highest-role}
+        [quo/text
+         {:size  :paragraph-2
+          :style {:color colors/neutral-50}}
+         (i18n/label :t/eligible-to-join-as {:role ""})]
+        [quo/context-tag
+         {:type    :icon
+          :icon    :i/members
+          :size    24
+          :context highest-role-text}]])
 
-         [rn/view {:style style/buttons}
-          [quo/button
-           {:type            :grey
-            :container-style {:flex 1}
-            :on-press        (fn []
-                               (rf/dispatch [:communities/reset-selected-permission-addresses id])
+     (when (empty? selected-addresses)
+       [rn/view
+        {:style style/error-message}
+        [quo/icon
+         :i/info
+         {:color colors/danger-50
+          :size  16}]
+        [quo/text
+         {:size  :paragraph-2
+          :style {:color colors/danger-50}}
+         (i18n/label :t/no-addresses-selected)]])
+
+     [rn/view {:style style/buttons}
+      [quo/button
+       {:type            :grey
+        :container-style {:flex 1}
+        :on-press        (fn []
+                           (rf/dispatch [:communities/reset-selected-permission-addresses id])
+                           (rf/dispatch [:navigate-back]))}
+       (i18n/label :t/cancel)]
+      [quo/button
+       {:container-style     {:flex 1}
+        :customization-color color
+        :disabled?           (empty? selected-addresses)
+        :on-press            (fn []
+                               (rf/dispatch [:communities/update-previous-permission-addresses id])
                                (rf/dispatch [:navigate-back]))}
-           (i18n/label :t/cancel)]
-          [quo/button
-           {:container-style     {:flex 1}
-            :customization-color color
-            :disabled?           (empty? selected-addresses)
-            :on-press            (fn []
-                                   (rf/dispatch [:communities/update-previous-permission-addresses id])
-                                   (rf/dispatch [:navigate-back]))}
-           (i18n/label :t/confirm-changes)]]]))))
+       (i18n/label :t/confirm-changes)]]]))

src/status_im/contexts/communities/events.cljs

@@ -9,7 +9,6 @@
     [schema.core :as schema]
     [status-im.constants :as constants]
     [status-im.contexts.chat.messenger.messages.link-preview.events :as link-preview.events]
-    status-im.contexts.communities.actions.addresses-for-permissions.events
     status-im.contexts.communities.actions.community-options.events
     status-im.contexts.communities.actions.leave.events
     [status-im.navigation.events :as navigation]

src/status_im/contexts/preview/quo/drawers/bottom_actions.cljs

@@ -19,10 +19,8 @@
 (def descriptor
   [{:type    :select
     :key     :actions
-    :options [{:key :one-action}
-              {:key :two-actions}]}
-   {:key  :button-one-label
-    :type :text}
+    :options [{:key :1-action}
+              {:key :2-actions}]}
    {:label   "Button 1 type"
     :type    :select
     :key     :type
@@ -32,8 +30,6 @@
     :type  :boolean
     :key   :disabled?
     :path  [:button-one-props]}
-   {:key  :button-two-label
-    :type :text}
    {:label   "Button 2 type"
     :type    :select
     :key     :type
@@ -43,59 +39,32 @@
     :type  :boolean
     :key   :disabled?
     :path  [:button-two-props]}
-   {:key  :blur?
-    :type :boolean}
+   {:key  :description
+    :type :text}
+   {:key  :button-one-label
+    :type :text}
+   {:key  :button-two-label
+    :type :text}
    {:key  :scroll?
-    :type :boolean}
-   {:key     :description
-    :type    :select
-    :options [{:key   nil
-               :value :none}
-              {:key :top}
-              {:key :bottom}
-              {:key :top-error}]}])
-
-(def role-descriptor
-  {:key     :role
-   :type    :select
-   :options [{:key :owner}
-             {:key :token-master}
-             {:key :admin}
-             {:key :member}]})
-
-(def description-descriptor
-  {:key  :description-text
-   :type :text})
-
-(def error-descriptor
-  {:key  :error-message
-   :type :text})
+    :type :boolean}])
 
 (defn view
   []
-  (let [state (reagent/atom {:actions          :two-actions
-                             :description      :bottom
-                             :description-text description
-                             :error-message    "Error message"
+  (let [state (reagent/atom {:actions          :2-actions
+                             :description      description
                              :button-one-label button-one
                              :button-two-label button-two
-                             :button-one-props {:on-press (button-press 1)
-                                                :type     :primary}
+                             :button-one-props {:on-press  (button-press 1)
+                                                :type      :primary
+                                                :icon-left :i/arrow-up}
                              :button-two-props {:on-press (button-press 2)
                                                 :type     :grey}
-                             :blur?            false
-                             :role             :owner
                              :scroll?          false})]
     (fn []
       [preview/preview-container
        {:state                     state
-        :descriptor                (merge descriptor
-                                          (case (:description @state)
-                                            :top       role-descriptor
-                                            :bottom    description-descriptor
-                                            :top-error error-descriptor
-                                            nil))
-        :blur?                     (:blur? @state)
+        :descriptor                descriptor
+        :blur?                     (:scroll? @state)
         :show-blur-background?     true
         :blur-dark-only?           true
         :component-container-style {:margin-top         40

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/share/share_qr_code.cljs

@@ -1,6 +1,7 @@
 (ns status-im.contexts.preview.quo.share.share-qr-code
   (:require
     [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]
@@ -14,23 +15,8 @@
    {:key     :type
     :type    :select
     :options [{:key :profile}
-              {:key :wallet}
-              {:key :saved-address}
-              {:key :watched-address}]}])
-
-(def possible-networks [:ethereum :optimism :arbitrum :myNet])
-
-(def networks-selector
-  {:key     :networks
-   :type    :select
-   :options [{:key   (take 1 possible-networks)
-              :value "Ethereum"}
-             {:key   (take 2 possible-networks)
-              :value "Ethereum and Optimism"}
-             {:key   (take 3 possible-networks)
-              :value "Ethereum, Optimism and Arbitrum"}
-             {:key   (take 4 possible-networks)
-              :value "Ethereum, Optimism, Arbitrum and unknown"}]})
+              {:key :wallet-legacy}
+              {:key :wallet-multichain}]}])
 
 (def profile-descriptor
   [{:key     :profile-picture
@@ -38,44 +24,40 @@
     :options [{:key   (resources/get-mock-image :user-picture-female2)
                :value "User 1"}
               {:key   (resources/get-mock-image :user-picture-male4)
-               :value "User 2"}]}
+               :value "User 2"}
+              {:key   nil
+               :value "No picture"}]}
    {:key  :full-name
     :type :text}
    (preview/customization-color-option)])
 
-(def wallet-descriptor
-  [{:key     :address
-    :type    :select
-    :options [{:key :legacy}
-              {:key :multichain}]}
-   {:key     :emoji
+(def wallet-legacy-descriptor
+  [{:key     :emoji
     :type    :select
     :options [{:key "🐈"}
               {:key "👻"}
               {:key "🐧"}]}
-   networks-selector
    (preview/customization-color-option)])
 
-(def saved-address-descriptor
-  [{:key     :address
-    :type    :select
-    :options [{:key :legacy}
-              {:key :multichain}]}
-   networks-selector
-   (preview/customization-color-option)])
+(def possible-networks [:ethereum :optimism :arbitrum :myNet])
 
-(def watched-address-descriptor
-  [{:key     :address
-    :type    :select
-    :options [{:key :legacy}
-              {:key :multichain}]}
-   {:key     :emoji
+(def wallet-multichain-descriptor
+  [{:key     :emoji
     :type    :select
     :options [{:key "🐈"}
               {:key "👻"}
               {:key "🐧"}]}
-   networks-selector
-   (preview/customization-color-option)])
+   (preview/customization-color-option)
+   {:key     :networks
+    :type    :select
+    :options [{:key   (take 1 possible-networks)
+               :value "Ethereum"}
+              {:key   (take 2 possible-networks)
+               :value "Ethereum and Optimism"}
+              {:key   (take 3 possible-networks)
+               :value "Ethereum, Optimism and Arbitrum"}
+              {:key   (take 4 possible-networks)
+               :value "Ethereum, Optimism, Arbitrum and unknown"}]}])
 
 (defn- get-network-short-name-url
   [network]
@@ -102,23 +84,22 @@
 (defn view
   []
   (let [state (reagent/atom {:type                :profile
-                             :address             :legacy
                              :qr-data             profile-link
                              :on-share-press      #(js/alert "share pressed")
                              :on-text-press       #(js/alert "text pressed")
                              :on-text-long-press  #(js/alert "text long press")
-                             :profile-picture     (resources/get-mock-image :user-picture-female2)
+                             :profile-picture     nil
                              :full-name           "My User"
                              :customization-color :purple
                              :emoji               "🐈"
+                             :on-info-press       #(js/alert "Info pressed")
                              :on-legacy-press     #(js/alert (str "Tab " % " pressed"))
                              :on-multichain-press #(js/alert (str "Tab " % " pressed"))
                              :networks            (take 2 possible-networks)
                              :on-settings-press   #(js/alert "Settings pressed")})
         _ (add-watch state :change set-qr-data-based-on-type)]
     (fn []
-      (let [qr-url              (if (and (= (:address @state) :multichain)
-                                         (not= (:type @state) :profile))
+      (let [qr-url              (if (= (:type @state) :wallet-multichain)
                                   (as-> (:networks @state) $
                                     (map get-network-short-name-url $)
                                     (apply str $)
@@ -131,20 +112,31 @@
                                   :error-level :highest})
             typed-descriptor    (concat descriptor
                                         (case (:type @state)
-                                          :profile         profile-descriptor
-                                          :wallet          wallet-descriptor
-                                          :saved-address   saved-address-descriptor
-                                          :watched-address watched-address-descriptor
+                                          :profile           profile-descriptor
+                                          :wallet-legacy     wallet-legacy-descriptor
+                                          :wallet-multichain wallet-multichain-descriptor
                                           nil))]
         [preview/preview-container
          {:state                     state
           :descriptor                typed-descriptor
-          :blur?                     true
-          :blur-height               500
-          :component-container-style {:padding-horizontal 0}
-          :show-blur-background?     true
-          :blur-dark-only?           true}
-         [quo/share-qr-code
-          (assoc @state
-                 :qr-image-uri qr-media-server-uri
-                 :qr-data      qr-url)]]))))
+          :component-container-style {:padding-horizontal 0}}
+         [rn/view
+          {:style {:flex               1
+                   :justify-content    :flex-end
+                   :align-items        :center
+                   :padding-horizontal 20
+                   :padding-vertical   30}}
+          [rn/view
+           {:style {:position :absolute
+                    :top      0
+                    :bottom   0
+                    :left     0
+                    :right    0}}
+           [rn/image
+            {:style  {:flex        1
+                      :resize-mode :stretch}
+             :source (resources/get-mock-image :dark-blur-bg)}]]
+          [quo/share-qr-code
+           (assoc @state
+                  :qr-image-uri qr-media-server-uri
+                  :qr-data      qr-url)]]]))))

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/preview/quo/wallet/confirmation_progress.cljs

@@ -6,7 +6,7 @@
     [status-im.contexts.preview.quo.preview :as preview]))
 
 (def descriptor
-  [{:type :number
+  [{:type :text
     :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 :number
+   {:type :text
     :key  :optimism-progress-percentage}
-   {:type :number
+   {:type :text
     :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
-                :arbitrum-progress-percentage 10
+                :optimism-progress-percentage "10"
+                :arbitrum-progress-percentage "10"
                 :network                      :mainnet
                 :state-mainnet                :pending
                 :state-arbitrum               :pending

src/status_im/contexts/profile/edit/accent_colour/events.cljs

@@ -1,30 +0,0 @@
-(ns status-im.contexts.profile.edit.accent-colour.events
-  (:require [taoensso.timbre :as log]
-            [utils.i18n :as i18n]
-            [utils.re-frame :as rf]))
-
-(rf/reg-event-fx :profile/edit-accent-colour-success
- (fn [_ [customization-color]]
-   {:fx [[:dispatch [:profile/save-local-accent-color customization-color]]
-         [:dispatch [:navigate-back]]
-         [:dispatch
-          [:toasts/upsert
-           {:type  :positive
-            :theme :dark
-            :text  (i18n/label :t/accent-colour-updated)}]]]}))
-
-(rf/reg-event-fx :profile/save-local-accent-color
- (fn [{:keys [db]} [customization-color]]
-   {:db (assoc-in db [:profile/profile :customization-color] customization-color)}))
-
-(defn edit-accent-colour
-  [{:keys [db]} [customization-color]]
-  (let [key-uid (get-in db [:profile/profile :key-uid])]
-    {:fx [[:json-rpc/call
-           [{:method     "wakuext_setCustomizationColor"
-             :params     [{:customizationColor customization-color
-                           :keyUid             key-uid}]
-             :on-success [:profile/edit-accent-colour-success customization-color]
-             :on-error   #(log/error "failed to edit accent color." {:error %})}]]]}))
-
-(rf/reg-event-fx :profile/edit-accent-colour edit-accent-colour)

src/status_im/contexts/profile/edit/accent_colour/events_test.cljs

@@ -1,17 +0,0 @@
-(ns status-im.contexts.profile.edit.accent-colour.events-test
-  (:require [cljs.test :refer [deftest is]]
-            matcher-combinators.test
-            [status-im.contexts.profile.edit.accent-colour.events :as sut]))
-
-(deftest edit-accent-color-test
-  (let [new-color :yellow
-        key-uid   "key-uid"
-        cofx      {:db {:profile/profile {:key-uid key-uid}}}
-        expected  {:fx [[:json-rpc/call
-                         [{:method     "wakuext_setCustomizationColor"
-                           :params     [{:customizationColor new-color
-                                         :keyUid             key-uid}]
-                           :on-success [:profile/edit-accent-colour-success new-color]
-                           :on-error   fn?}]]]}]
-    (is (match? expected
-                (sut/edit-accent-colour cofx [new-color])))))

src/status_im/contexts/profile/edit/accent_colour/style.cljs

@@ -1,30 +0,0 @@
-(ns status-im.contexts.profile.edit.accent-colour.style
-  (:require [quo.foundations.colors :as colors]))
-
-(defn page-wrapper
-  [insets]
-  {:padding-top        (:top insets)
-   :padding-bottom     (:bottom insets)
-   :padding-horizontal 1
-   :flex               1})
-
-(def screen-container
-  {:flex            1
-   :padding-top     14
-   :justify-content :space-between})
-
-(def padding-horizontal
-  {:padding-horizontal 20})
-
-(def color-title
-  {:color         colors/white-70-blur
-   :margin-top    20
-   :margin-bottom 16})
-
-(def button-wrapper
-  {:margin-vertical    12
-   :padding-horizontal 20})
-
-(def profile-card
-  {:margin-top    22
-   :margin-bottom 5})

src/status_im/contexts/profile/edit/accent_colour/view.cljs

@@ -1,66 +0,0 @@
-(ns status-im.contexts.profile.edit.accent-colour.view
-  (:require [quo.core :as quo]
-            [react-native.core :as rn]
-            [react-native.safe-area :as safe-area]
-            [reagent.core :as reagent]
-            [status-im.constants :as constants]
-            [status-im.contexts.profile.edit.accent-colour.style :as style]
-            [status-im.contexts.profile.utils :as profile.utils]
-            [utils.i18n :as i18n]
-            [utils.re-frame :as rf]))
-
-(defn f-view
-  [{:keys [customization-color]}]
-  (let [insets                (safe-area/get-insets)
-        {window-width :width} (rn/get-window)
-        unsaved-custom-color  (reagent/atom customization-color constants/profile-default-color)
-        on-change             #(reset! unsaved-custom-color %)]
-    (fn [{:keys [customization-color]}]
-      (let [profile         (rf/sub [:profile/profile-with-image])
-            profile-picture (profile.utils/photo profile)
-            display-name    (profile.utils/displayed-name profile)]
-        (rn/use-effect
-         #(on-change customization-color)
-         [customization-color])
-        [quo/overlay
-         {:type            :shell
-          :container-style (style/page-wrapper insets)}
-         [quo/page-nav
-          {:key        :header
-           :background :blur
-           :icon-name  :i/arrow-left
-           :on-press   #(rf/dispatch [:navigate-back])}]
-         [rn/view
-          {:key   :content
-           :style style/screen-container}
-          [rn/view {:style {:flex 1}}
-           [rn/view {:style style/padding-horizontal}
-            [quo/text-combinations {:title (i18n/label :t/accent-colour)}]
-            [quo/profile-card
-             {:profile-picture     profile-picture
-              :name                display-name
-              :card-style          style/profile-card
-              :customization-color @unsaved-custom-color}]
-            [quo/text
-             {:size   :paragraph-2
-              :weight :medium
-              :style  style/color-title}
-             (i18n/label :t/accent-colour)]]
-           [quo/color-picker
-            {:blur?            true
-             :default-selected @unsaved-custom-color
-             :on-change        on-change
-             :container-style  style/padding-horizontal
-             :window-width     window-width}]]
-          [rn/view {:style style/button-wrapper}
-           [quo/button
-            {:type                :primary
-             :customization-color @unsaved-custom-color
-             :on-press            (fn []
-                                    (rf/dispatch [:profile/edit-accent-colour @unsaved-custom-color]))}
-            (i18n/label :t/save-colour)]]]]))))
-
-(defn view
-  []
-  (let [customization-color (rf/sub [:profile/customization-color])]
-    [:f> f-view {:customization-color customization-color}]))

src/status_im/contexts/profile/edit/list_items.cljs

@@ -25,7 +25,7 @@
                :action          :arrow
                :container-style style/item-container}
               {:title           (i18n/label :t/accent-colour)
-               :on-press        #(rf/dispatch [:open-modal :edit-accent-colour])
+               :on-press        not-implemented/alert
                :label           :color
                :label-props     (colors/resolve-color customization-color theme)
                :blur?           true

src/status_im/contexts/profile/events.cljs

@@ -3,7 +3,6 @@
     [legacy.status-im.data-store.settings :as data-store.settings]
     [native-module.core :as native-module]
     [re-frame.core :as re-frame]
-    [status-im.contexts.profile.edit.accent-colour.events]
     [status-im.contexts.profile.edit.header.events]
     [status-im.contexts.profile.edit.name.events]
     [status-im.contexts.profile.login.events :as profile.login]

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/shell/jump_to/events.cljs

@@ -149,9 +149,7 @@
                           (not hidden-screen?)
                           (:current-chat-id db))
                      (conj [:chat/close]))})
-    {:db          (-> db
-                      (assoc :view-id go-to-view-id)
-                      (dissoc :modal-view-ids))
+    {:db          (assoc db :view-id go-to-view-id)
      :navigate-to go-to-view-id}))
 
 (rf/defn shell-navigate-back
@@ -176,8 +174,7 @@
                shell.constants/close-screen-with-slide-to-right-animation))}
        (when (and current-chat-id community-id)
          {:dispatch [:shell/add-switcher-card shell.constants/community-screen community-id]}))
-      {:navigate-back nil
-       :db            (dissoc db :modal-view-ids)})))
+      {:navigate-back nil})))
 
 (rf/defn floating-screen-opened
   {:events [:shell/floating-screen-opened]}

src/status_im/contexts/shell/share/wallet/view.cljs

@@ -48,7 +48,7 @@
   [props]
   (let [{:keys [account width index]} props
         selected-networks             (reagent/atom [:ethereum :optimism :arbitrum])
-        wallet-type                   (reagent/atom :legacy)]
+        wallet-type                   (reagent/atom :wallet-legacy)]
     (fn []
       (let [share-title         (str (:name account) " " (i18n/label :t/address))
             qr-url              (utils/get-wallet-qr {:wallet-type       @wallet-type
@@ -62,8 +62,7 @@
         [rn/view {:style {:height qr-size :width width :margin-left (if (zero? index) 0 -30)}}
          [rn/view {:style style/qr-code-container}
           [quo/share-qr-code
-           {:type                :wallet
-            :address             @wallet-type
+           {:type                @wallet-type
             :qr-image-uri        qr-media-server-uri
             :qr-data             qr-url
             :networks            @selected-networks
@@ -72,8 +71,8 @@
             :full-name           (:name account)
             :customization-color (:color account)
             :emoji               (:emoji account)
-            :on-multichain-press #(reset! wallet-type :multichain)
-            :on-legacy-press     #(reset! wallet-type :legacy)
+            :on-multichain-press #(reset! wallet-type :wallet-multichain)
+            :on-legacy-press     #(reset! wallet-type :wallet-legacy)
             :on-settings-press   #(open-preferences @selected-networks)}]]]))))
 
 (def wallet-qr-code-item (memoize wallet-qr-code-item-internal))