Replace use-theme-value with use-theme #19602

src/legacy/status_im/bottom_sheet/sheets.cljs

@@ -3,7 +3,7 @@
     [legacy.status-im.bottom-sheet.view :as bottom-sheet]
     [legacy.status-im.ui.screens.about-app.views :as about-app]
     [legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]
-    [quo.theme :as theme]
+    [quo.theme]
     [react-native.core :as rn]
     [utils.re-frame :as rf]))
 
@@ -32,7 +32,7 @@
                        (rn/hw-back-add-listener dismiss-bottom-sheet-callback)
                        (fn []
                          (rn/hw-back-remove-listener dismiss-bottom-sheet-callback))))
-       [theme/provider {:theme (or page-theme (theme/get-theme))}
+       [quo.theme/provider (or page-theme (quo.theme/get-theme))
         [bottom-sheet/bottom-sheet opts
          (when content
            [content (when options options)])]])]))

src/legacy/status_im/ui/components/chat_icon/screen.cljs

@@ -8,7 +8,7 @@
     [legacy.status-im.ui.screens.profile.visibility-status.utils :as visibility-status-utils]
     [quo.components.avatars.user-avatar.style :as user-avatar.style]
     [quo.core :as quo]
-    [quo.theme :as theme]
+    [quo.theme]
     [re-frame.core :as re-frame.core]
     [react-native.core :as rn]
     [status-im.contexts.profile.utils :as profile.utils]
@@ -72,7 +72,7 @@
                 :full-name        full-name
                 :font-size        (get text-style :font-size)
                 :background-color (user-avatar.style/customization-color customization-color
-                                                                         (theme/get-theme))
+                                                                         (quo.theme/get-theme))
                 :indicator-size   0
                 :indicator-border 0
                 :indicator-color  "#000000"

src/legacy/status_im/ui/screens/profile/contact/views.cljs

@@ -11,7 +11,7 @@
     [legacy.status-im.ui.components.topbar :as topbar]
     [legacy.status-im.ui.screens.profile.components.sheets :as sheets]
     [quo.components.avatars.user-avatar.style :as user-avatar.style]
-    [quo.theme :as theme]
+    [quo.theme]
     [re-frame.core :as re-frame]
     [reagent.core :as reagent]
     [status-im.constants :as constants]
@@ -206,7 +206,7 @@
            :bottom-separator false
            :title            (profile.utils/displayed-name profile)
            :color            (user-avatar.style/customization-color customization-color
-                                                                    (theme/get-theme))
+                                                                    (quo.theme/get-theme))
            :photo            (profile.utils/photo profile)
            :monospace        (not ens-verified)
            :subtitle         secondary-name

src/legacy/status_im/ui/screens/profile/user/views.cljs

@@ -14,7 +14,7 @@
     [legacy.status-im.ui.screens.profile.visibility-status.views :as visibility-status]
     [legacy.status-im.utils.utils :as utils]
     [quo.components.avatars.user-avatar.style :as user-avatar.style]
-    [quo.theme :as theme]
+    [quo.theme]
     [re-frame.core :as re-frame]
     [reagent.core :as reagent]
     [status-im.common.qr-codes.view :as qr-codes]
@@ -221,7 +221,7 @@
                                                               {:content (edit/bottom-sheet
                                                                          has-picture)}])
                               :color     (user-avatar.style/customization-color customization-color
-                                                                                (theme/get-theme))
+                                                                                (quo.theme/get-theme))
                               :title     (profile.utils/displayed-name profile)
                               :photo     (profile.utils/photo profile)
                               :monospace (not ens-verified)

src/quo/components/animated_header_flatlist/view.cljs

@@ -54,7 +54,7 @@
 
 (defn- f-animated-header-list
   [{:keys [header-comp main-comp back-button-on-press] :as params}]
-  (let [theme                   (quo.theme/use-theme-value)
+  (let [theme                   (quo.theme/use-theme)
         window-height           (:height (rn/get-window))
         {:keys [top bottom]}    (safe-area/get-insets)
         ;; view height calculation is different because window height is different on iOS and

src/quo/components/avatars/account_avatar/style.cljs

@@ -56,9 +56,10 @@
 
 
 (defn root-container
-  [{:keys [type size theme customization-color]
+  [{:keys [type size customization-color]
     :or   {size                default-size
-           customization-color :blue}}]
+           customization-color :blue}}
+   theme]
   (let [watch-only? (= type :watch-only)
         width       (cond-> size
                       (keyword? size) (container-size size))]

src/quo/components/avatars/account_avatar/view.cljs

@@ -5,7 +5,7 @@
     [quo.theme :as quo.theme]
     [react-native.core :as rn]))
 
-(defn- view-internal
+(defn view
   "Opts:
 
     :type  - keyword -> :default/:watch-only
@@ -21,15 +21,14 @@
     :or   {size  style/default-size
            emoji "🍑"}
     :as   opts}]
-  (let [emoji-size (style/get-emoji-size size)]
+  (let [theme      (quo.theme/use-theme)
+        emoji-size (style/get-emoji-size size)]
     [rn/view
      {:accessible          true
       :accessibility-label :account-avatar
-      :style               (style/root-container opts)}
+      :style               (style/root-container opts theme)}
      [rn/text
       {:accessibility-label      :account-emoji
        :adjusts-font-size-to-fit true
        :style                    {:font-size emoji-size}}
       (when emoji (string/trim emoji))]]))
-
-(def view (quo.theme/with-theme view-internal))

src/quo/components/avatars/channel_avatar/view.cljs

@@ -34,7 +34,7 @@
        :container-style style/lock-icon
        :size            12}]]))
 
-(defn- view-internal
+(defn view
   "Options:
 
   :size - keyword (default nil) - Container size, for the moment,
@@ -52,22 +52,21 @@
   :full-name - string (default nil) - When :emoji is blank, this value will be
   used to extract the initials.
   "
-  [{:keys [size emoji customization-color locked? full-name theme]}]
-  [rn/view
-   {:accessibility-label :channel-avatar
-    :style               (style/outer-container {:theme               theme
-                                                 :size                size
-                                                 :customization-color customization-color})}
-   (if (string/blank? emoji)
-     [initials
-      {:full-name           full-name
-       :size                size
-       :customization-color customization-color
-       :theme               theme}]
-     [rn/text
-      {:style               (style/emoji-size size)
-       :accessibility-label :emoji}
-      (when emoji (string/trim emoji))])
-   [lock locked? size theme]])
-
-(def view (quo.theme/with-theme view-internal))
+  [{:keys [size emoji customization-color locked? full-name]}]
+  (let [theme (quo.theme/use-theme)]
+    [rn/view
+     {:accessibility-label :channel-avatar
+      :style               (style/outer-container {:theme               theme
+                                                   :size                size
+                                                   :customization-color customization-color})}
+     (if (string/blank? emoji)
+       [initials
+        {:full-name           full-name
+         :size                size
+         :customization-color customization-color
+         :theme               theme}]
+       [rn/text
+        {:style               (style/emoji-size size)
+         :accessibility-label :emoji}
+        (when emoji (string/trim emoji))])
+     [lock locked? size theme]]))

src/quo/components/avatars/collection_avatar/view.cljs

@@ -4,15 +4,14 @@
     [quo.theme :as quo.theme]
     [react-native.fast-image :as fast-image]))
 
-(defn- view-internal
+(defn view
   "Opts:
 
     :image - collection image
     :theme - keyword -> :light/:dark"
-  [{:keys [image theme size] :or {size :size-24}}]
-  [fast-image/fast-image
-   {:accessibility-label :collection-avatar
-    :source              image
-    :style               (style/collection-avatar theme size)}])
-
-(def view (quo.theme/with-theme view-internal))
+  [{:keys [image size] :or {size :size-24}}]
+  (let [theme (quo.theme/use-theme)]
+    [fast-image/fast-image
+     {:accessibility-label :collection-avatar
+      :source              image
+      :style               (style/collection-avatar theme size)}]))

src/quo/components/avatars/group_avatar/view.cljs

@@ -21,46 +21,44 @@
    :size-80 {:icon      32
              :container 80}})
 
-(defn- view-internal
-  [_]
-  (fn [{:keys [size theme customization-color picture icon-name emoji chat-name]
-        :or   {size                :size-20
-               customization-color :blue
-               picture             nil
-               icon-name           :i/members}}]
-    (let [container-size (get-in sizes [size :container])
-          icon-size      (get-in sizes [size :icon])]
-      [rn/view
-       {:accessibility-label :group-avatar
-        :style               (style/container {:container-size      container-size
-                                               :customization-color customization-color
-                                               :theme               theme})}
-       (if picture
-         [fast-image/fast-image
-          {:source picture
-           :style  {:width  container-size
-                    :height container-size}}]
-         (cond
-           emoji
-           (if (= size :size-80)
-             [rn/text
-              {:style (style/avatar-identifier theme)}
-              emoji]
-             [text/text
-              {:size  :paragraph-1
-               :style (dissoc (style/avatar-identifier theme) :font-size)}
-              emoji])
-           chat-name
-           (if (= size :size-80)
-             [rn/text
-              {:style (style/avatar-identifier theme)}
-              ((comp first string/upper-case) chat-name)]
-             [text/text
-              {:size :paragraph-1}
-              ((comp first string/upper-case) chat-name)])
-           :else
-           [icon/icon icon-name
-            {:size  icon-size
-             :color colors/white-opa-70}]))])))
-
-(def view (quo.theme/with-theme view-internal))
+(defn view
+  [{:keys [size customization-color picture icon-name emoji chat-name]
+    :or   {size                :size-20
+           customization-color :blue
+           picture             nil
+           icon-name           :i/members}}]
+  (let [theme          (quo.theme/use-theme)
+        container-size (get-in sizes [size :container])
+        icon-size      (get-in sizes [size :icon])]
+    [rn/view
+     {:accessibility-label :group-avatar
+      :style               (style/container {:container-size      container-size
+                                             :customization-color customization-color
+                                             :theme               theme})}
+     (if picture
+       [fast-image/fast-image
+        {:source picture
+         :style  {:width  container-size
+                  :height container-size}}]
+       (cond
+         emoji
+         (if (= size :size-80)
+           [rn/text
+            {:style (style/avatar-identifier theme)}
+            emoji]
+           [text/text
+            {:size  :paragraph-1
+             :style (dissoc (style/avatar-identifier theme) :font-size)}
+            emoji])
+         chat-name
+         (if (= size :size-80)
+           [rn/text
+            {:style (style/avatar-identifier theme)}
+            ((comp first string/upper-case) chat-name)]
+           [text/text
+            {:size :paragraph-1}
+            ((comp first string/upper-case) chat-name)])
+         :else
+         [icon/icon icon-name
+          {:size  icon-size
+           :color colors/white-opa-70}]))]))

src/quo/components/avatars/icon_avatar.cljs

@@ -15,11 +15,12 @@
    :size-20 {:component 20
              :icon      12}})
 
-(defn icon-avatar-internal
-  [{:keys [size icon color opacity border? theme]
+(defn icon-avatar
+  [{:keys [size icon color opacity border?]
     :or   {opacity 20
            size    :size-32}}]
-  (let [{component-size :component icon-size :icon} (get sizes size)
+  (let [theme                                       (quo.theme/use-theme)
+        {component-size :component icon-size :icon} (get sizes size)
         circle-color                                (colors/resolve-color color theme opacity)
         icon-color                                  (colors/resolve-color color theme)]
     (if (keyword? icon)
@@ -38,5 +39,3 @@
       [rn/image
        {:source icon
         :style  {:width component-size :height component-size}}])))
-
-(def icon-avatar (quo.theme/with-theme icon-avatar-internal))

src/quo/components/avatars/user_avatar/schema.cljs

@@ -14,7 +14,6 @@
       [:status-indicator? {:optional true} [:maybe boolean?]]
       [:online? {:optional true} [:maybe boolean?]]
       [:ring? {:optional true} [:maybe boolean?]]
-      [:theme :schema.common/theme]
       [:profile-picture
        {:optional true}
        [:maybe :schema.quo/profile-picture-source]]]]]

src/quo/components/avatars/user_avatar/view.cljs

@@ -11,9 +11,10 @@
     utils.string))
 
 (defn initials-avatar
-  [{:keys [full-name size customization-color theme]
+  [{:keys [full-name size customization-color]
     :or   {customization-color :blue}}]
-  (let [font-size       (get-in style/sizes [size :font-size])
+  (let [theme           (quo.theme/use-theme)
+        font-size       (get-in style/sizes [size :font-size])
         amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)]
     [rn/view
      {:accessibility-label :initials-avatar
@@ -31,14 +32,14 @@
    When calling the `profile-picture-fn` and passing the `:ring?` key, be aware that the `profile-picture-fn`
    may have an `:override-ring?` value. If it does then the `:ring?` value will not be used.
    For reference, refer to the `utils.image-server` namespace for these `profile-picture-fn` are generated."
-  [{:keys [full-name size profile-picture static?
-           status-indicator? online? ring? theme]
+  [{:keys [full-name size profile-picture static? status-indicator? online? ring?]
     :or   {size              :big
            status-indicator? true
            online?           true
            ring?             true}
     :as   props}]
-  (let [full-name          (or full-name "Your Name")
+  (let [theme              (quo.theme/use-theme)
+        full-name          (or full-name "Your Name")
         ;; image generated with `profile-picture-fn` is round cropped
         ;; no need to add border-radius for them
         outer-styles       (style/outer size (not (:fn profile-picture)))
@@ -66,7 +67,8 @@
                       {:length                   amount-initials
                        :full-name                full-name
                        :font-size                (:font-size (text/text-style {:size
-                                                                               font-size}))
+                                                                               font-size}
+                                                                              nil))
                        :indicator-size           (when status-indicator?
                                                    (:status-indicator sizes))
                        :indicator-border         (when status-indicator?
@@ -87,6 +89,4 @@
 
                :else {:uri profile-picture})}])]))
 
-(def user-avatar
-  (quo.theme/with-theme
-   (schema/instrument #'user-avatar-internal component-schema/?schema)))
+(def user-avatar (schema/instrument #'user-avatar-internal component-schema/?schema))

src/quo/components/avatars/wallet_user_avatar/view.cljs

@@ -34,7 +34,7 @@
       (= size second-smallest-possible)))
 (def biggest-possible (last (keys properties)))
 
-(defn- view-internal
+(defn wallet-user-avatar
   "Options:
 
   :full-name - string (default: nil) - used to generate initials
@@ -44,9 +44,10 @@
   :monospace? - boolean (default: false) - use monospace font
   :lowercase? - boolean (default: false) - lowercase text
   :neutral? - boolean (default: false) - use neutral colors variant"
-  [{:keys [full-name customization-color size theme monospace? lowercase? neutral?]
+  [{:keys [full-name customization-color size monospace? lowercase? neutral?]
     :or   {size biggest-possible}}]
-  (let [circle-size (:size (size properties))
+  (let [theme       (quo.theme/use-theme)
+        circle-size (:size (size properties))
         small?      (check-if-size-small size)
         initials    (utils.string/get-initials full-name (if small? 1 2))]
     [rn/view
@@ -57,5 +58,3 @@
        :weight              (if monospace? :monospace (:font-weight (size properties)))
        :style               (style/text customization-color neutral? theme)}
       (if (and initials lowercase?) (string/lower-case initials) initials)]]))
-
-(def wallet-user-avatar (quo.theme/with-theme view-internal))