WIP: refactor notifications (#17413)

to accomplish #17288

migrated :

notifications

Issue Opened: A bug has been identified within the activity-logs component and is currently under investigation.

.github/PULL_REQUEST_TEMPLATE.md

@@ -63,4 +63,10 @@ Documentation change PR (review please): https://github.com/status-im/status.im/
 
 <!-- (PRs will only be accepted if squashed into single commit.) -->
 
+### Before and after screenshots comparison
+
+| Figma (if available) | iOS (if available)    | Android (if available)
+| --- | --- | --- |
+| Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after. |
+
 status: ready <!-- Can be ready or wip -->

doc/README.md

@@ -35,6 +35,11 @@
 [Component tests (jest) overview](component-tests-overview.md)
 
 
+## Project details
+
+[status-go introduction (recorded meeting)](https://drive.google.com/file/d/1B7TljmTZ8fHkqJH8ChU1Cp4FGDFM03gq/view)
+
+[re-frame usage (recorded meeting)](https://drive.google.com/file/d/1qv_E0CEGzQpu_zGXD0gCTU5EvhC2k8Jy/view)
 
 ## Misc
 

src/quo2/README.md

@@ -69,6 +69,35 @@ In the image above we can see the properties are `Type`, `State`, `Size`,
   ...)
 ```
 
+### Handling Sizes
+In the designs, sizes are referred to as integers. To avoid having the codebase littered with magic numbers we instead have a keyword convention to use in components to map these keywords with their sizes.
+
+The convention is `:size-<number>`, e.g size `20` is `:size-20`
+
+```clojure
+;; bad
+(defn button
+  [{:keys [size]}]
+  [rn/view
+   {:style {:height (case size
+                      20 20
+                      40 40
+                      0)}}]
+  ...)
+```
+
+```clojure
+;; good
+(defn button
+  [{:keys [size]}]
+  [rn/view
+   {:style {:height (case size
+                      :size-20 20
+                      :size-40 40
+                      0)}}]
+  ...)
+```
+
 ## Clojure var conventions
 
 - Due to the fact that every `view` namespace should export only one component

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

@@ -7,21 +7,21 @@
             [quo2.components.avatars.group-avatar.style :as style]))
 
 (def sizes
-  {:size/s-20 {:icon      12
-               :container 20}
-   :size/s-28 {:icon      16
-               :container 28}
-   :size/s-32 {:icon      16
-               :container 32}
-   :size/s-48 {:icon      20
-               :container 48}
-   :size/s-80 {:icon      32
-               :container 80}})
+  {:size-20 {:icon      12
+             :container 20}
+   :size-28 {:icon      16
+             :container 28}
+   :size-32 {:icon      16
+             :container 32}
+   :size-48 {:icon      20
+             :container 48}
+   :size-80 {:icon      32
+             :container 80}})
 
 (defn- view-internal
   [_]
   (fn [{:keys [size theme customization-color picture icon-name]
-        :or   {size                :size/s-20
+        :or   {size                :size-20
                customization-color :blue
                picture             nil
                icon-name           :i/group}}]

src/quo2/components/avatars/icon_avatar.cljs

@@ -5,19 +5,19 @@
             [react-native.core :as rn]))
 
 (def ^:private sizes
-  {:size/s-48 {:component 48
-               :icon      20}
-   :size/s-32 {:component 32
-               :icon      20}
-   :size/s-24 {:component 24
-               :icon      16}
-   :size/s-20 {:component 20
-               :icon      12}})
+  {:size-48 {:component 48
+             :icon      20}
+   :size-32 {:component 32
+             :icon      20}
+   :size-24 {:component 24
+             :icon      16}
+   :size-20 {:component 20
+             :icon      12}})
 
 (defn icon-avatar-internal
   [{:keys [size icon color opacity border? theme]
     :or   {opacity 20
-           size    :size/s-32}}]
+           size    :size-32}}]
   (let [{component-size :component icon-size :icon} (get sizes size)
         circle-color                                (colors/custom-color color 50 opacity)
         icon-color                                  (colors/custom-color-by-theme color 50 60)]

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

@@ -39,7 +39,7 @@
    :background-color intials avatar background color
    :color            intials avatar text color
    :size             intials avatar radius
-   :ring?            render ident ring around avatar?}
+   :ring?            render ident ring around avatar? NOTE: this option may not work if override-ring? is not nil}
 
   supported color formats:
   #RRGGBB

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

@@ -29,10 +29,11 @@
    only icon
    [button {:icon-only? true} :i/close-circle]"
   [_ _]
-  (let [pressed? (reagent/atom false)]
+  (let [pressed-state? (reagent/atom false)]
     (fn
       [{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top
-               customization-color theme accessibility-label icon-only? container-style inner-style]
+               customization-color theme accessibility-label icon-only? container-style inner-style
+               pressed? on-press-in on-press-out]
         :or   {type                :primary
                size                40
                customization-color (cond (= type :primary)  :blue
@@ -46,14 +47,18 @@
                                            :background          background
                                            :type                type
                                            :theme               theme
-                                           :pressed?            @pressed?
+                                           :pressed?            (if pressed? pressed? @pressed-state?)
                                            :icon-only?          icon-only?})
             icon-size (when (= 24 size) 12)]
         [rn/touchable-without-feedback
          {:disabled            disabled?
           :accessibility-label accessibility-label
-          :on-press-in         #(reset! pressed? true)
-          :on-press-out        #(reset! pressed? nil)
+          :on-press-in         (fn []
+                                 (reset! pressed-state? true)
+                                 (when on-press-in (on-press-in)))
+          :on-press-out        (fn []
+                                 (reset! pressed-state? nil)
+                                 (when on-press-out (on-press-out)))
           :on-press            on-press
           :on-long-press       on-long-press}
          [rn/view
@@ -76,7 +81,7 @@
              [customization-colors/overlay
               {:customization-color customization-color
                :theme               theme
-               :pressed?            @pressed?}])
+               :pressed?            (if pressed? pressed? @pressed-state?)}])
            (when (= background :photo)
              [blur/view
               {:blur-radius   20

src/quo2/components/dropdowns/network_dropdown/view.cljs

@@ -20,7 +20,7 @@
        [preview-list/view
         {:type      :network
          :list-size (count networks)
-         :size      :size/s-20}
+         :size      :size-20}
         networks]])))
 
 (def view (quo.theme/with-theme internal-view))

src/quo2/components/list_items/preview_list/properties.cljs

@@ -7,43 +7,43 @@
   (if (types-for-squared-border type) :squared :rounded))
 
 (def sizes
-  {:size/s-32 {:size             32
-               :user-avatar-size :small
-               :border-radius    {:rounded 16 :squared 10}
-               :hole-radius      {:rounded 18 :squared 12}
-               :margin-left      -8
-               :hole-size        36
-               :hole-x           22
-               :hole-y           -2}
-   :size/s-24 {:size             24
-               :user-avatar-size :xs
-               :border-radius    {:rounded 12 :squared 8}
-               :hole-radius      {:rounded 13 :squared 9}
-               :margin-left      -4
-               :hole-size        26
-               :hole-x           19
-               :hole-y           -1}
-   :size/s-20 {:size             20
-               :user-avatar-size :xxs
-               :border-radius    {:rounded 10 :squared 8}
-               :hole-radius      {:rounded 11 :squared 9}
-               :margin-left      -4
-               :hole-size        22
-               :hole-x           15
-               :hole-y           -1}
-   :size/s-16 {:size             16
-               :user-avatar-size :xxxs
-               :border-radius    {:rounded 8 :squared 8}
-               :hole-radius      {:rounded 9 :squared 9}
-               :margin-left      -4
-               :hole-size        18
-               :hole-x           11
-               :hole-y           -1}
-   :size/s-14 {:size             14
-               :user-avatar-size :xxxs
-               :border-radius    {:rounded 7 :squared 7}
-               :hole-radius      {:rounded 8 :squared 8}
-               :margin-left      -2
-               :hole-size        16
-               :hole-x           11
-               :hole-y           -1}})
+  {:size-32 {:size             32
+             :user-avatar-size :small
+             :border-radius    {:rounded 16 :squared 10}
+             :hole-radius      {:rounded 18 :squared 12}
+             :margin-left      -8
+             :hole-size        36
+             :hole-x           22
+             :hole-y           -2}
+   :size-24 {:size             24
+             :user-avatar-size :xs
+             :border-radius    {:rounded 12 :squared 8}
+             :hole-radius      {:rounded 13 :squared 9}
+             :margin-left      -4
+             :hole-size        26
+             :hole-x           19
+             :hole-y           -1}
+   :size-20 {:size             20
+             :user-avatar-size :xxs
+             :border-radius    {:rounded 10 :squared 8}
+             :hole-radius      {:rounded 11 :squared 9}
+             :margin-left      -4
+             :hole-size        22
+             :hole-x           15
+             :hole-y           -1}
+   :size-16 {:size             16
+             :user-avatar-size :xxxs
+             :border-radius    {:rounded 8 :squared 8}
+             :hole-radius      {:rounded 9 :squared 9}
+             :margin-left      -4
+             :hole-size        18
+             :hole-x           11
+             :hole-y           -1}
+   :size-14 {:size             14
+             :user-avatar-size :xxxs
+             :border-radius    {:rounded 7 :squared 7}
+             :hole-radius      {:rounded 8 :squared 8}
+             :margin-left      -2
+             :hole-size        16
+             :hole-x           11
+             :hole-y           -1}})

src/quo2/components/list_items/preview_list/view.cljs

@@ -1,67 +1,13 @@
 (ns quo2.components.list-items.preview-list.view
   (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
             [quo2.components.avatars.user-avatar.view :as user-avatar]
-            [quo2.components.icon :as quo2.icons]
-            [quo2.components.markdown.text :as quo2.text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as quo.theme]
             [quo2.components.list-items.preview-list.properties :as properties]
+            [quo2.components.tags.number-tag.view :as number-tag]
+            [quo2.theme :as quo.theme]
             [react-native.core :as rn]
             [react-native.fast-image :as fast-image]
             [react-native.hole-view :as hole-view]))
 
-;; This overflow item needs to be cleaned up once the "number tag" component is implemented
-;; https://github.com/status-im/status-mobile/issues/17045
-(defn get-overflow-color
-  [blur? blur-light-color blur-dark-color light-color dark-color theme]
-  (if blur?
-    (colors/theme-colors blur-light-color blur-dark-color theme)
-    (colors/theme-colors light-color dark-color theme)))
-
-(def more-icon-for-sizes #{16 14})
-
-(defn overflow-label
-  [{:keys [label size blur? border-radius margin-left theme more-than-99-label]}]
-  [rn/view
-   {:style {:width            size
-            :height           size
-            :margin-left      margin-left
-            :border-radius    border-radius
-            :justify-content  :center
-            :align-items      :center
-            :background-color (get-overflow-color
-                               blur?
-                               colors/neutral-80-opa-5
-                               colors/white-opa-5
-                               colors/neutral-20
-                               colors/neutral-90
-                               theme)}}
-   (if (more-icon-for-sizes size)
-     [quo2.icons/icon :i/more
-      {:size  12
-       :color (get-overflow-color
-               blur?
-               colors/neutral-80-opa-70
-               colors/white-opa-70
-               colors/neutral-50
-               colors/neutral-40
-               theme)}]
-     [quo2.text/text
-      {:size   (if (= size 32) :paragraph-2 :label)
-       :weight :medium
-       :style  {:color       (get-overflow-color
-                              blur?
-                              colors/neutral-80-opa-70
-                              colors/white-opa-70
-                              colors/neutral-50
-                              colors/neutral-40
-                              theme)
-                :margin-left -2}}
-      ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
-      (if (< label 100)
-        (str "+" label)
-        more-than-99-label)])])
-
 (defn- preview-item
   [{:keys [item type size-key]}]
   (let [size             (get-in properties/sizes [size-key :size])
@@ -70,22 +16,22 @@
                                  [size-key :border-radius (properties/border-type type)])]
     (case type
       :user                        [user-avatar/user-avatar
-                                    (merge {:ring?             false
-                                            :status-indicator? false
-                                            :size              user-avatar-size}
-                                           item)]
+                                    (assoc item
+                                           :ring?             false
+                                           :status-indicator? false
+                                           :size              user-avatar-size)]
 
       :accounts                    [account-avatar/view
-                                    (merge item {:size size})]
+                                    (assoc item :size size)]
 
       (:communities :collectibles) [fast-image/fast-image
-                                    {:source (:source item)
+                                    {:source (or (:source item) item)
                                      :style  {:width         size
                                               :height        size
                                               :border-radius border-radius}}]
 
       (:tokens :network :dapps)    [fast-image/fast-image
-                                    {:source (:source item)
+                                    {:source (or (:source item) item)
                                      :style  {:width         size
                                               :height        size
                                               :border-radius border-radius}}]
@@ -118,16 +64,16 @@
   "[preview-list opts items]
    opts
    {:type          :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network
-    :size          :size/s-32 | :size/s-24 | :size/s-20 | :size/s-16 | :size/s-14
+    :size          :size-32 | :size-24 | :size-20 | :size-16 | :size-14
     :number        number of items in the list (optional)
     :blur?         overflow-label blur?}
    items           preview list items (only 4 items is required for preview)
   "
-  [{:keys [type size number blur? theme more-than-99-label]} items]
-  (let [size-key      (if (contains? properties/sizes size) size :size/s-24)
-        number        (or number (count items))
-        margin-left   (get-in properties/sizes [size-key :margin-left])
-        border-radius (get-in properties/sizes [size-key :border-radius (properties/border-type type)])]
+  [{:keys [type size number blur?]} items]
+  (let [size-key    (if (contains? properties/sizes size) size :size-24)
+        number      (or number (count items))
+        border-type (properties/border-type type)
+        margin-left (get-in properties/sizes [size-key :margin-left])]
     [rn/view {:style {:flex-direction :row}}
      (for [index (range (if (> number 4) 3 number))]
        ^{:key (str index number)}
@@ -138,13 +84,11 @@
          :item     (get (vec items) index)
          :number   number}])
      (when (> number 4)
-       [overflow-label
-        {:label              (- number 3)
-         :size               (get-in properties/sizes [size-key :size])
-         :blur?              blur?
-         :border-radius      border-radius
-         :margin-left        margin-left
-         :theme              theme
-         :more-than-99-label more-than-99-label}])]))
+       [number-tag/view
+        {:type            border-type
+         :number          (str (- number 3))
+         :size            size-key
+         :blur?           blur?
+         :container-style {:margin-left margin-left}}])]))
 
 (def view (quo.theme/with-theme view-internal))

src/quo2/components/list_items/token_value/view.cljs

@@ -12,9 +12,9 @@
     [reagent.core :as reagent]))
 
 (defn- internal-view
-  [{:keys [theme customization-color status token metrics? values on-press]}]
+  []
   (let [state (reagent/atom :default)]
-    (fn []
+    (fn [{:keys [theme customization-color status token metrics? values on-press]}]
       (let [bg-opacity                                                      (case @state
                                                                               :active  10
                                                                               :pressed 5
@@ -42,7 +42,7 @@
            [text/text
             {:size  :paragraph-2
              :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-            (str crypto-value " " (string/upper-case (clj->js token)))]]]
+            (str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]]
          [rn/view
           {:style {:align-items     :flex-end
                    :justify-content :space-between}}

src/quo2/components/messages/system_message.cljs

@@ -21,7 +21,7 @@
   [rn/view
    {:margin-right 8}
    [icon-avatar/icon-avatar
-    {:size    :size/s-32
+    {:size    :size-32
      :icon    icon
      :color   color
      :opacity opacity}]])

src/quo2/components/navigation/bottom_nav_tab/view.cljs

@@ -86,6 +86,6 @@
            counter-label]
           [rn/view {:style (styles/notification-dot customization-color)}]))]]))
 
-(defn bottom-nav-tab
+(defn view
   [opts]
   [:f> f-bottom-nav-tab opts])

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

@@ -68,8 +68,7 @@
 (def ^:private toast-container (quo.theme/with-theme toast-container-internal))
 
 (defn toast
-  [{:keys [icon icon-color title text action undo-duration undo-on-press container-style
-           theme user]}]
+  [{:keys [icon icon-color title text action undo-duration undo-on-press container-style theme user]}]
   (let [context-theme (or theme (quo.theme/get-theme))]
     [quo.theme/provider {:theme context-theme}
      [toast-container
@@ -78,7 +77,6 @@
                                (cond-> (style/icon context-theme)
                                  icon-color
                                  (assoc :color icon-color))]
-
                               user
                               [user-avatar/user-avatar user])
        :title           title

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

@@ -88,7 +88,7 @@
      :preview [preview-list/view
                {:type   :communities
                 :number 3
-                :size   :size/s-24}
+                :size   :size-24}
                communities-list]
      :graph   [text/text "graph"]
      :none    nil

src/quo2/components/settings/settings_item/style.cljs

@@ -1,22 +1,18 @@
 (ns quo2.components.settings.settings-item.style
   (:require [quo2.foundations.colors :as colors]))
 
-(defn find-icon-height
-  [description tag image]
-  (let [icon-height (if (= image :icon-avatar) 32 20)
-        icon-height (if description 40 icon-height)]
-    (if tag 72 icon-height)))
-
 (defn container
-  [{:keys [in-card? tag container-style]}]
-  (merge {:padding-horizontal 12
-          :padding-top        (if in-card? 12 13)
-          :padding-bottom     (if in-card? 12 13)
-          :flex-direction     :row
-          :justify-content    :space-between
-          :height             (if tag 96 48)}
+  [{:keys [container-style]}]
+  (merge {:padding         12
+          :flex-direction  :row
+          :justify-content :space-between}
          container-style))
 
+(defn left-sub-container
+  [{:keys [tag description]}]
+  {:flex-direction :row
+   :align-items    (if (or tag description) :flex-start :center)})
+
 (def sub-container
   {:flex-direction :row
    :align-items    :center})
@@ -24,12 +20,12 @@
 (def left-container
   {:margin-left     12
    :height          "100%"
-   :justify-content :center})
+   :justify-content :flex-start})
 
 (defn image-container
-  [description tag image]
-  {:height          (find-icon-height description tag image)
-   :justify-content :flex-start})
+  [image tag description]
+  {:height     (if (= image :icon-avatar) 32 20)
+   :margin-top (if (or tag description) 1 0)})
 
 (def status-container
   {:flex-direction :row
@@ -57,3 +53,8 @@
    :height           15
    :border-radius    12
    :background-color background-color})
+
+(def status-tag-container
+  {:margin-top    7
+   :margin-bottom 2
+   :margin-left   -1})

src/quo2/components/settings/settings_item/view.cljs

@@ -65,7 +65,7 @@
                 :label           (:label tag-props)
                 :no-icon?        true
                 :size            :small
-                :container-style {:margin-top 8}}]
+                :container-style style/status-tag-container}]
     :context  [context-tag/view
                (merge tag-props
                       {:type            :icon
@@ -83,7 +83,8 @@
                label-props]
      :color   [rn/view
                {:style (style/label-dot label-props)}]
-     :preview [preview-list/view {:type (:type label-props)} (:data label-props)]
+     :preview [preview-list/view {:type (:type label-props) :size :size-24}
+               (:data label-props)]
      nil)])
 
 (defn action-component
@@ -105,7 +106,7 @@
    {:style               (style/container props)
     :on-press            on-press
     :accessibility-label accessibility-label}
-   [rn/view {:style style/sub-container}
+   [rn/view {:style (style/left-sub-container props)}
     [image-component props]
     [rn/view {:style style/left-container}
      [text/text {:weight :medium} title]

src/quo2/components/tags/context_tag/view.cljs

@@ -91,19 +91,20 @@
      :default
      [tag-skeleton {:theme theme :size size :text full-name}
       [user-avatar/user-avatar
-       {:full-name         full-name
-        :profile-picture   profile-picture
-        :size              (if (= size 24) :xxs 28)
-        :status-indicator? false
-        :ring?             false}]]
+       {:full-name           full-name
+        :profile-picture     profile-picture
+        :size                (if (= size 24) :xxs 28)
+        :status-indicator?   false
+        :ring?               false
+        :customization-color customization-color}]]
 
      :multiuser
-     [preview-list/view {:type :user :size 20}
+     [preview-list/view {:type :user :size :size-20}
       users]
 
      :multinetwork
-     [preview-list/view {:type :network :size 20}
-      (map #(hash-map :profile-picture %) networks)]
+     [preview-list/view {:type :network :size :size-20}
+      networks]
 
      :audio
      [tag-skeleton {:theme theme :text (str duration)}
@@ -114,7 +115,7 @@
      [tag-skeleton {:theme theme :size size :text group-name}
       [group-avatar/view
        {:icon-name           :i/members
-        :size                (if (= size 24) :size/s-20 :size/s-28)
+        :size                (if (= size 24) :size-20 :size-28)
         :customization-color (colors/custom-color customization-color 50)}]]
 
      (:channel :community)

src/quo2/components/tags/network_tags/component_spec.cljs

@@ -15,5 +15,5 @@
                 :networks [{:source "network-icon1.png"}
                            {:source "network-icon2.png"}
                            {:source "network-icon3.png"}]
-                :size     :size/s-32}])
+                :size     :size-32}])
     (h/is-truthy (h/get-by-text "Multiple Networks"))))

src/quo2/components/tags/network_tags/view.cljs

@@ -14,7 +14,7 @@
    [preview-list/view
     {:type   :network
      :number (count networks)
-     :size   :size/s-16} networks]
+     :size   :size-16} networks]
    [text/text
     {:weight :medium
      :size   :paragraph-2

src/quo2/components/tags/number_tag/component_spec.cljs

@@ -8,13 +8,13 @@
     (h/render [number-tag/view
                {:type   :rounded
                 :number "3"
-                :size   :size/s-32
+                :size   :size-32
                 :blur?  false}])
     (h/is-truthy (h/get-by-text "+3")))
   (h/test "+48 render"
     (h/render [number-tag/view
                {:type   :squared
                 :number "48"
-                :size   :size/s-24
+                :size   :size-24
                 :blur?  true}])
     (h/is-truthy (h/get-by-text "+48"))))

src/quo2/components/tags/number_tag/style.cljs

@@ -2,26 +2,26 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (def sizes
-  {:size/s-32 {:size          32
-               :width-extra   40
-               :border-radius {:rounded 16 :squared 10}
-               :icon-size     20}
-   :size/s-24 {:size          24
-               :width-extra   32
-               :border-radius {:rounded 12 :squared 8}
-               :icon-size     16}
-   :size/s-20 {:size          20
-               :width-extra   24
-               :border-radius {:rounded 10 :squared 8}
-               :icon-size     12}
-   :size/s-16 {:size          16
-               :width-extra   20
-               :border-radius {:rounded 8 :squared 8}
-               :icon-size     12}
-   :size/s-14 {:size          14
-               :width-extra   16
-               :border-radius {:rounded 7 :squared 7}
-               :icon-size     12}})
+  {:size-32 {:size          32
+             :width-extra   40
+             :border-radius {:rounded 16 :squared 10}
+             :icon-size     20}
+   :size-24 {:size          24
+             :width-extra   32
+             :border-radius {:rounded 12 :squared 8}
+             :icon-size     16}
+   :size-20 {:size          20
+             :width-extra   24
+             :border-radius {:rounded 10 :squared 8}
+             :icon-size     12}
+   :size-16 {:size          16
+             :width-extra   20
+             :border-radius {:rounded 8 :squared 8}
+             :icon-size     12}
+   :size-14 {:size          14
+             :width-extra   16
+             :border-radius {:rounded 7 :squared 7}
+             :icon-size     12}})
 
 (defn get-color
   [blur? theme]
@@ -55,10 +55,11 @@
     (get-in sizes [size (if widen? :width-extra :size)])))
 
 (defn container
-  [{:keys [type number size blur? theme]}]
-  {:style {:width            (get-width size number)
-           :height           (get-in sizes [size :size])
-           :border-radius    (get-shape-value size :border-radius type)
-           :justify-content  :center
-           :align-items      :center
-           :background-color (get-bg-color blur? theme)}})
+  [{:keys [type number size blur? theme container-style]}]
+  {:style (assoc container-style
+                 :width            (get-width size number)
+                 :height           (get-in sizes [size :size])
+                 :border-radius    (get-shape-value size :border-radius type)
+                 :justify-content  :center
+                 :align-items      :center
+                 :background-color (get-bg-color blur? theme))})

src/quo2/components/tags/number_tag/view.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.tags.number-tag.view
   (:require [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
-            [react-native.core :as rn]
             [quo2.components.tags.number-tag.style :as style]
-            [quo2.theme :as quo.theme]))
+            [quo2.theme :as quo.theme]
+            [react-native.core :as rn]))
 
 (defn view-internal
   [{:keys [number size blur? theme] :as props}]
@@ -12,7 +12,7 @@
     [rn/view (style/container props)
      (if (and (> size-value 20) (< (count number) 3))
        [text/text
-        {:size   (if (= size :size/s-32)
+        {:size   (if (= size :size-32)
                    :paragraph-2
                    :label)
          :weight :medium

src/quo2/components/wallet/account_card/style.cljs

@@ -9,7 +9,7 @@
     colors/white))
 
 (defn card
-  [customization-color watch-only? metrics? theme]
+  [{:keys [customization-color watch-only? metrics? theme pressed?]}]
   {:width              162
    :height             (if metrics? 88 68)
    :background-color   (if watch-only?
@@ -21,7 +21,10 @@
    :border-radius      16
    :border-width       1
    :border-color       (if watch-only?
-                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+                         (colors/theme-colors
+                          (if pressed? colors/neutral-80-opa-10 colors/neutral-80-opa-5)
+                          (if pressed? colors/white-opa-10 colors/white-opa-5)
+                          theme)
                          colors/neutral-80-opa-10)
    :padding-horizontal 12
    :padding-top        6
@@ -67,10 +70,13 @@
    :margin-horizontal 4})
 
 (defn add-account-container
-  [theme metrics?]
+  [{:keys [theme metrics? pressed?]}]
   {:width              161
    :height             (if metrics? 88 68)
-   :border-color       (colors/theme-colors colors/neutral-20 colors/white-opa-5 theme)
+   :border-color       (colors/theme-colors
+                        (if pressed? colors/neutral-40 colors/neutral-30)
+                        (if pressed? colors/neutral-70 colors/neutral-80)
+                        theme)
    :border-width       1
    :border-style       :dashed
    :align-items        :center
@@ -84,7 +90,7 @@
    :line-height 20})
 
 (defn loader-view
-  [width height watch-only? theme]
+  [{:keys [width height watch-only? theme]}]
   {:width            width
    :height           height
    :background-color (if (and watch-only? (= :light theme)) colors/neutral-80-opa-5 colors/white-opa-10)
@@ -93,3 +99,6 @@
 (def loader-container
   {:flex-direction :row
    :align-items    :center})
+
+(def metrics-icon-container
+  {:margin-left 4})

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

@@ -5,8 +5,9 @@
             [quo2.components.wallet.account-card.style :as style]
             [quo2.components.buttons.button.view :as button]
             [quo2.components.markdown.text :as text]
-            [utils.i18n :as i18n]
-            [quo2.theme :as theme]))
+            [quo2.theme :as quo.theme]
+            [reagent.core :as reagent]
+            [quo2.foundations.customization-colors :as customization-colors]))
 
 (defn- loading-view
   [{:keys [customization-color type theme metrics?]}]
@@ -14,103 +15,142 @@
         empty-type? (= :empty type)]
     [rn/view
      {:accessibility-label :loading
-      :style               (style/card customization-color watch-only? metrics? theme)}
+      :style               (style/card {:customization-color customization-color
+                                        :watch-only?         watch-only?
+                                        :metrics?            metrics?
+                                        :theme               theme
+                                        :pressed?            false})}
      [rn/view {:style style/loader-container}
       [rn/view
-       {:style (assoc (style/loader-view 16
-                                         16
-                                         watch-only?
-                                         theme)
+       {:style (assoc (style/loader-view {:width       16
+                                          :height      16
+                                          :watch-only? watch-only?
+                                          :theme       theme})
                       :margin-right 8
                       :margin-top   2)}]
       [rn/view {:style style/watch-only-container}
-       [rn/view {:style (style/loader-view 57 8 watch-only? theme)}]
-       (when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]]
+       [rn/view
+        {:style (style/loader-view {:width       57
+                                    :height      8
+                                    :watch-only? watch-only?
+                                    :theme       theme})}]
+       (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]]
      [rn/view
-      {:style (assoc (style/loader-view
-                      (if empty-type? 56 80)
-                      16
-                      watch-only?
-                      theme)
+      {:style (assoc (style/loader-view {:width       (if empty-type? 56 80)
+                                         :height      16
+                                         :watch-only? watch-only?
+                                         :theme       theme})
                      :margin-top
                      13)}]
      (when metrics?
        [rn/view
         {:accessibility-label :metrics
-         :style               (assoc (style/loader-view
-                                      (if empty-type? 37 96)
-                                      8
-                                      watch-only?
-                                      theme)
+         :style               (assoc (style/loader-view {:width       (if empty-type? 37 96)
+                                                         :height      8
+                                                         :watch-only? watch-only?
+                                                         :theme       theme})
                                      :margin-top
                                      10)}])]))
 
+(defn- metrics-percentage
+  [watch-only? theme account-percentage]
+  [text/text
+   {:weight              :semi-bold
+    :size                :paragraph-2
+    :accessibility-label :metrics
+    :style               (style/metrics watch-only? theme)}
+   account-percentage])
+
+(defn- metrics-info
+  [watch-only? theme account-amount]
+  [:<>
+   [rn/view (style/separator watch-only? theme)]
+   [text/text
+    {:weight :semi-bold
+     :size   :paragraph-2
+     :style  (style/metrics watch-only? theme)}
+    account-amount]
+   [rn/view {:style style/metrics-icon-container}
+    [icon/icon
+     :i/positive
+     {:color (colors/theme-colors (if watch-only? colors/neutral-50 colors/white-opa-70)
+                                  colors/white-opa-70
+                                  theme)
+      :size  16}]]])
+
 (defn- user-account
-  [{:keys [state name balance percentage-value loading? amount customization-color type emoji metrics?
-           theme on-press]}]
-  (let [watch-only?        (= :watch-only type)
-        empty-type?        (= :empty type)
-        account-amount     (if (= :empty state) "€0.00" amount)
-        account-name       (if (= :empty state) (i18n/label :t/Account 1) name)
-        account-percentage (if (= :empty state) "€0.00" percentage-value)]
-    (if loading?
-      [loading-view
-       {:customization-color customization-color
-        :type                type
-        :theme               theme
-        :metrics?            metrics?}]
-      [rn/pressable
-       {:style    (style/card customization-color watch-only? metrics? theme)
-        :on-press on-press}
-       [rn/view {:style style/profile-container}
-        [rn/view {:style {:padding-bottom 2 :margin-right 2}}
-         [text/text {:style style/emoji} emoji]]
-        [rn/view {:style style/watch-only-container}
-         [text/text
-          {:size   :paragraph-2
-           :weight :medium
-           :style  (style/account-name watch-only? theme)}
-          account-name]
-         (when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]]
-       [text/text
-        {:size   :heading-2
-         :weight :semi-bold
-         :style  (style/account-value watch-only? theme)}
-        balance]
-       (when metrics?
-         [rn/view {:style style/metrics-container}
-          [text/text
-           {:weight              :semi-bold
-            :size                :paragraph-2
-            :accessibility-label :metrics
-            :style               (style/metrics watch-only? theme)}
-           account-percentage]
-          (when (not empty-type?)
-            [:<>
-             [rn/view (style/separator watch-only? theme)]
+  []
+  (let [pressed?     (reagent/atom false)
+        on-press-in  #(reset! pressed? true)
+        on-press-out #(reset! pressed? false)]
+    (fn [{:keys [name balance percentage-value loading? amount customization-color type emoji metrics?
+                 theme on-press]}]
+      (let [watch-only? (= :watch-only type)]
+        (if loading?
+          [loading-view
+           {:customization-color customization-color
+            :type                type
+            :theme               theme
+            :metrics?            metrics?}]
+          [rn/pressable
+           {:on-press-in  on-press-in
+            :on-press-out on-press-out
+            :style        (style/card {:customization-color customization-color
+                                       :watch-only?         watch-only?
+                                       :metrics?            metrics?
+                                       :theme               theme
+                                       :pressed?            @pressed?})
+            :on-press     on-press}
+           (when (and customization-color (not watch-only?))
+             [customization-colors/overlay
+              {:customization-color customization-color
+               :border-radius       16
+               :theme               theme
+               :pressed?            @pressed?}])
+           [rn/view {:style style/profile-container}
+            [rn/view {:style {:padding-bottom 2 :margin-right 2}}
+             [text/text {:style style/emoji} emoji]]
+            [rn/view {:style style/watch-only-container}
              [text/text
-              {:weight :semi-bold
-               :size   :paragraph-2
-               :style  (style/metrics watch-only? theme)} account-amount]
-             [rn/view {:style {:margin-left 4}}
-              [icon/icon :positive
-               {:color (colors/theme-colors (if watch-only? colors/neutral-50 colors/white-opa-70)
-                                            colors/white-opa-70
-                                            theme)
-                :size  16}]]])])])))
+              {:size   :paragraph-2
+               :weight :medium
+               :style  (style/account-name watch-only? theme)}
+              name]
+             (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]]
+           [text/text
+            {:size   :heading-2
+             :weight :semi-bold
+             :style  (style/account-value watch-only? theme)}
+            balance]
+           (when metrics?
+             [rn/view {:style style/metrics-container}
+              [metrics-percentage watch-only? theme percentage-value]
+              (when (not= :empty type)
+                [metrics-info watch-only? theme amount])])])))))
 
 (defn- add-account-view
-  [{:keys [on-press customization-color theme metrics?]}]
-  [rn/view (style/add-account-container theme metrics?)
-   [button/button
-    {:type                :primary
-     :size                24
-     :icon                true
-     :accessibility-label :add-account
-     :on-press            on-press
-     :customization-color customization-color
-     :icon-only?          true}
-    :i/add]])
+  []
+  (let [pressed? (reagent/atom false)]
+    (fn [{:keys [on-press customization-color theme metrics?]}]
+      [rn/pressable
+       {:on-press     on-press
+        :on-press-in  #(reset! pressed? true)
+        :on-press-out #(reset! pressed? false)
+        :style        (style/add-account-container {:theme    theme
+                                                    :metrics? metrics?
+                                                    :pressed? @pressed?})}
+       [button/button
+        {:type                :primary
+         :size                24
+         :icon                true
+         :accessibility-label :add-account
+         :on-press            on-press
+         :pressed?            @pressed?
+         :on-press-in         #(reset! pressed? true)
+         :on-press-out        #(reset! pressed? false)
+         :customization-color customization-color
+         :icon-only?          true}
+        :i/add]])))
 
 (defn- view-internal
   [{:keys [type] :as props}]
@@ -121,4 +161,4 @@
     :empty       [user-account props]
     nil))
 
-(def view (theme/with-theme view-internal))
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/wallet/keypair/style.cljs

@@ -2,14 +2,19 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (defn container
-  [selected? customization-color theme]
-  {:border-radius  20
+  [{:keys [blur? customization-color theme selected?]}]
+  {:flex           1
+   :border-radius  20
    :border-width   1
    :border-color   (if selected?
-                     (colors/theme-colors (colors/custom-color customization-color 50)
-                                          (colors/custom-color customization-color 60)
-                                          theme)
-                     (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))
+                     (if blur?
+                       colors/white
+                       (colors/theme-colors (colors/custom-color customization-color 50)
+                                            (colors/custom-color customization-color 60)
+                                            theme))
+                     (if blur?
+                       colors/white-opa-5
+                       (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)))
    :padding-bottom 8})
 
 (def header-container

src/quo2/components/wallet/keypair/view.cljs

@@ -25,69 +25,79 @@
        (if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard))))
 
 (defn avatar
-  [type full-name customization-color]
-  (if (= type :default-keypair)
+  [{{:keys [full-name]} :details
+    avatar-type         :type
+    customization-color :customization-color}]
+  (if (= avatar-type :default-keypair)
     [user-avatar/user-avatar
      {:full-name           full-name
       :ring?               true
       :size                :small
       :customization-color customization-color}]
     [icon-avatar/icon-avatar
-     {:size    :size/s-32
+     {:size    :size-32
       :icon    :i/placeholder
       :border? true}]))
 
 (defn title-view
-  [full-name action selected? type customization-color on-options-press theme]
-  [rn/view
-   {:style               style/title-container
-    :accessibility-label :title}
-   [text/text {:weight :semi-bold}
-    (if (= type :default-keypair) (keypair-string full-name) full-name)]
-   (if (= action :selector)
-     [selectors/radio
-      {:checked?            selected?
-       :customization-color customization-color}]
-     [rn/pressable {:on-press on-options-press}
-      [icon/icon :i/options
-       {:color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-        :accessibility-label :options-button}]])])
+  [{:keys [details action selected? type blur? customization-color on-options-press theme]}]
+  (let [{:keys [full-name]} details]
+    [rn/view
+     {:style               style/title-container
+      :accessibility-label :title}
+     [text/text {:weight :semi-bold}
+      (if (= type :default-keypair) (keypair-string full-name) full-name)]
+     (if (= action :selector)
+       [selectors/radio
+        {:checked?            selected?
+         :blur?               blur?
+         :customization-color customization-color}]
+       [rn/pressable {:on-press on-options-press}
+        [icon/icon :i/options
+         {:color               (if blur?
+                                 colors/white-opa-70
+                                 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
+          :accessibility-label :options-button}]])]))
 
 (defn details-view
-  [address stored theme]
-  [rn/view
-   {:style {:flex-direction :row
-            :align-items    :center}}
-   [text/text
-    {:size                :paragraph-2
-     :accessibility-label :details
-     :style               {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-    (details-string address stored)]
-   (when (= stored :on-keycard)
-     [rn/view {:style {:margin-left 4}}
-      [icon/icon :i/keycard-card
-       {:size  16
-        :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]])])
+  [{:keys [details stored blur? theme]}]
+  (let [{:keys [address]} details]
+    [rn/view
+     {:style {:flex-direction :row
+              :align-items    :center}}
+     [text/text
+      {:size                :paragraph-2
+       :accessibility-label :details
+       :style               {:color (if blur?
+                                      colors/white-opa-40
+                                      (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
+      (details-string address stored)]
+     (when (= stored :on-keycard)
+       [rn/view {:style {:margin-left 4}}
+        [icon/icon :i/keycard-card
+         {:size  16
+          :color (if blur?
+                   colors/white-opa-40
+                   (colors/theme-colors colors/neutral-50 colors/neutral-40))}]])]))
 
 (defn- view-internal
   []
   (let [selected? (reagent/atom true)]
-    (fn [{:keys [theme accounts customization-color type details stored action on-options-press]}]
-      (let [{:keys [address full-name]} details]
-        [rn/pressable
-         {:style    (style/container @selected? customization-color theme)
-          :on-press #(when (= action :selector) (reset! selected? (not @selected?)))}
-         [rn/view {:style style/header-container}
-          [avatar type full-name customization-color]
-          [rn/view
-           {:style {:margin-left 8
-                    :flex        1}}
-           [title-view full-name action @selected? type customization-color on-options-press theme]
-           [details-view address stored theme]]]
-         [rn/flat-list
-          {:data      accounts
-           :render-fn account-list-card/view
-           :separator [rn/view {:style {:height 8}}]
-           :style     {:padding-horizontal 8}}]]))))
+    (fn [{:keys [accounts action] :as props}]
+      [rn/pressable
+       {:style    (style/container (merge props {:selected? @selected?}))
+        :on-press #(when (= action :selector) (reset! selected? (not @selected?)))}
+       [rn/view {:style style/header-container}
+        [avatar props]
+        [rn/view
+         {:style {:margin-left 8
+                  :flex        1}}
+         [title-view (assoc props :selected? @selected?)]
+         [details-view props]]]
+       [rn/flat-list
+        {:data      accounts
+         :render-fn account-list-card/view
+         :separator [rn/view {:style {:height 8}}]
+         :style     {:padding-horizontal 8}}]])))
 
 (def view (quo.theme/with-theme view-internal))

src/quo2/core.cljs

@@ -77,6 +77,7 @@
     quo2.components.messages.gap
     quo2.components.messages.system-message
     quo2.components.navigation.floating-shell-button.view
+    quo2.components.navigation.bottom-nav-tab.view
     quo2.components.navigation.page-nav.view
     quo2.components.navigation.top-nav.view
     quo2.components.notifications.activity-log.view
@@ -262,6 +263,7 @@
 (def skeleton-list quo2.components.loaders.skeleton-list.view/view)
 
 ;;;; Navigation
+(def bottom-nav-tab quo2.components.navigation.bottom-nav-tab.view/view)
 (def floating-shell-button quo2.components.navigation.floating-shell-button.view/view)
 (def page-nav quo2.components.navigation.page-nav.view/page-nav)
 (def top-nav quo2.components.navigation.top-nav.view/view)

src/quo2/foundations/customization_colors.cljs

@@ -10,11 +10,12 @@
       (colors/alpha colors/black (if pressed? 0 0.2)))))
 
 (defn overlay
-  [{:keys [theme pressed? customization-color]}]
+  [{:keys [theme pressed? customization-color border-radius]}]
   [rn/view
    {:position         :absolute
     :top              0
     :left             0
     :right            0
     :bottom           0
+    :border-radius    border-radius
     :background-color (get-overlay-color theme pressed? customization-color)}])

src/react_native/async_storage.cljs

@@ -1,30 +1,37 @@
-(ns status-im.async-storage.core
+(ns react-native.async-storage
   (:require ["@react-native-async-storage/async-storage" :default async-storage]
-            [goog.functions :as f]
-            [re-frame.core :as re-frame]
-            [status-im.async-storage.transit :refer [clj->transit transit->clj]]
-            [taoensso.timbre :as log]))
+            [cognitect.transit :as transit]
+            [taoensso.timbre :as log]
+            goog.functions))
 
 (def ^:private debounce-ms 250)
 
-(def key->string str)
+(def ^:private reader (transit/reader :json))
+(def ^:private writer (transit/writer :json))
+
+(defn clj->transit [o] (transit/write writer o))
+(defn transit->clj
+  [o]
+  (try (transit/read reader o)
+       (catch :default e
+         (log/error e))))
 
 (defn set-item!
   [k value]
   (-> ^js async-storage
-      (.setItem (key->string k)
+      (.setItem (str k)
                 (clj->transit value))
       (.catch (fn [error]
                 (log/error "[async-storage]" error)))))
 
-(defn- set-item-factory
+(defn set-item-factory
   []
   (let [tmp-storage (atom {})
-        debounced   (f/debounce (fn []
-                                  (doseq [[k v] @tmp-storage]
-                                    (swap! tmp-storage dissoc k)
-                                    (set-item! k v)))
-                                debounce-ms)]
+        debounced   (goog.functions/debounce (fn []
+                                               (doseq [[k v] @tmp-storage]
+                                                 (swap! tmp-storage dissoc k)
+                                                 (set-item! k v)))
+                                             debounce-ms)]
     (fn [items]
       (swap! tmp-storage merge items)
       (debounced))))
@@ -32,7 +39,7 @@
 (defn get-items
   [ks cb]
   (-> ^js async-storage
-      (.multiGet (to-array (map key->string ks)))
+      (.multiGet (to-array (map str ks)))
       (.then (fn [^js data]
                (cb (->> (js->clj data)
                         (map (comp transit->clj second))
@@ -44,7 +51,7 @@
 (defn get-item
   [k cb]
   (-> ^js async-storage
-      (.getItem (key->string k))
+      (.getItem (str k))
       (.then (fn [^js data]
                (-> data
                    js->clj
@@ -53,10 +60,3 @@
       (.catch (fn [error]
                 (cb nil)
                 (log/error "[async-storage]" error)))))
-
-(re-frame/reg-fx ::set! (set-item-factory))
-
-(re-frame/reg-fx
- ::get
- (fn [{ks :keys cb :cb}]
-   (get-items ks cb)))

src/status_im/async_storage/transit.cljs

@@ -1,13 +0,0 @@
-(ns status-im.async-storage.transit
-  (:require [cognitect.transit :as transit]
-            [taoensso.timbre :as log]))
-
-(def reader (transit/reader :json))
-(def writer (transit/writer :json))
-
-(defn clj->transit [o] (transit/write writer o))
-(defn transit->clj
-  [o]
-  (try (transit/read reader o)
-       (catch :default e
-         (log/error e))))

src/status_im/browser/core.cljs

@@ -20,7 +20,7 @@
     [utils.url :as url]
     [react-native.platform :as platform]
     [status-im.utils.random :as random]
-    [status-im.utils.types :as types]
+    [status-im.utils.deprecated-types :as types]
     [status-im.utils.universal-links.utils :as links]
     [status-im2.navigation.events :as navigation]
     [taoensso.timbre :as log]

src/status_im/browser/permissions_test.cljs

@@ -3,7 +3,7 @@
             [status-im.browser.core :as browser]
             [status-im.browser.core-test :as core.tests]
             [status-im.browser.permissions :as permissions]
-            [status-im.utils.types :as types]))
+            [status-im.utils.deprecated-types :as types]))
 
 (deftest permissions-test
   (let [dapp-name  "test.com"

src/status_im/chat/models/message.cljs

@@ -5,7 +5,7 @@
             [status-im.data-store.messages :as data-store.messages]
             [status-im.transport.message.protocol :as protocol]
             [react-native.platform :as platform]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im2.contexts.chat.messages.delete-message.events :as delete-message]
             [status-im2.contexts.chat.messages.list.events :as message-list]
             [status-im2.contexts.chat.messages.list.state :as view.state]

src/status_im/communities/core.cljs

@@ -5,8 +5,7 @@
             [quo.design-system.colors :as colors]
             [quo2.foundations.colors :as quo2.colors]
             [re-frame.core :as re-frame]
-            [status-im.utils.types :as types]
-            [status-im.async-storage.core :as async-storage]
+            [status-im.utils.deprecated-types :as types]
             [status-im.ui.components.emoji-thumbnail.styles :as emoji-thumbnail-styles]
             [status-im.utils.universal-links.core :as universal-links]
             [status-im.bottom-sheet.events :as bottom-sheet]
@@ -815,51 +814,6 @@
                     :on-success  #(re-frame/dispatch [:sanitize-messages-and-process-response %])
                     :on-error    #(log/error "failed to reorder community category" %)}]})
 
-(defn category-hash
-  [public-key community-id category-id]
-  (hash (str public-key community-id category-id)))
-
-(rf/defn store-category-state
-  {:events [::store-category-state]}
-  [{:keys [db]} community-id category-id state-open?]
-  (let [public-key (get-in db [:profile/profile :public-key])
-        hash       (category-hash public-key community-id category-id)]
-    {::async-storage/set! {hash state-open?}}))
-
-(rf/defn update-category-states-in-db
-  {:events [::category-states-loaded]}
-  [{:keys [db]} community-id hashes states]
-  (let [public-key     (get-in db [:profile/profile :public-key])
-        categories-old (get-in db [:communities community-id :categories])
-        categories     (reduce (fn [acc [category-id category]]
-                                 (let [hash             (get hashes category-id)
-                                       state            (get states hash)
-                                       category-updated (assoc category :state state)]
-                                   (assoc acc category-id category-updated)))
-                               {}
-                               categories-old)]
-    {:db (update-in db [:communities community-id :categories] merge categories)}))
-
-(rf/defn load-category-states
-  {:events [:communities/load-category-states]}
-  [{:keys [db]} community-id]
-  (let [public-key            (get-in db [:profile/profile :public-key])
-        categories            (get-in db [:communities community-id :categories])
-        {:keys [keys hashes]} (reduce (fn [acc category]
-                                        (let [category-id (get category 0)
-                                              hash        (category-hash
-                                                           public-key
-                                                           community-id
-                                                           category-id)]
-                                          (-> acc
-                                              (assoc-in [:hashes category-id] hash)
-                                              (update :keys #(conj % hash)))))
-                                      {}
-                                      categories)]
-    {::async-storage/get {:keys keys
-                          :cb   #(re-frame/dispatch
-                                  [::category-states-loaded community-id hashes %])}}))
-
 ;; Note - dispatch is used to make sure we are opening community once `pop-to-root` is processed.
 ;; Don't directly merge effects using `navigation/navigate-to`, because it will work in debug and
 ;; release, but for e2e `pop-to-root` closes even currently opened community

src/status_im/contact/block.cljs

@@ -5,7 +5,7 @@
             [status-im.data-store.chats :as chats-store]
             [status-im2.contexts.contacts.events :as contacts-store]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im2.contexts.shell.activity-center.events :as activity-center]
             [status-im2.navigation.events :as navigation]))
 

src/status_im/data_store/chats.cljs

@@ -3,7 +3,7 @@
             [status-im2.constants :as constants]
             [status-im.data-store.messages :as messages]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [taoensso.timbre :as log]))
 
 (defn rpc->type

src/status_im/events.cljs

@@ -2,7 +2,6 @@
   (:require
     clojure.set
     [re-frame.core :as re-frame]
-    [status-im.async-storage.core :as async-storage]
     status-im.backup.core
     status-im.bootnodes.core
     status-im.browser.core
@@ -193,9 +192,9 @@
   (rf/merge cofx
             (cond
               (= :chat view-id)
-              {::async-storage/set! {:chat-id (get-in cofx [:db :current-chat-id])
-                                     :key-uid (get-in cofx [:db :profile/profile :key-uid])}
-               :db                  (assoc db :screens/was-focused-once? true)}
+              {:async-storage-set {:chat-id (get-in cofx [:db :current-chat-id])
+                                   :key-uid (get-in cofx [:db :profile/profile :key-uid])}
+               :db                (assoc db :screens/was-focused-once? true)}
 
               (not (get db :screens/was-focused-once?))
               {:db (assoc db :screens/was-focused-once? true)})

src/status_im/keycard/common.cljs

@@ -11,7 +11,7 @@
             [utils.datetime :as datetime]
             [status-im.utils.keychain.core :as keychain]
             [react-native.platform :as platform]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im2.navigation.events :as navigation]
             [taoensso.timbre :as log]))
 

src/status_im/keycard/fx.cljs

@@ -4,7 +4,7 @@
             [re-frame.core :as re-frame]
             [status-im.keycard.card :as card]
             [native-module.core :as native-module]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [taoensso.timbre :as log]))
 
 (re-frame/reg-fx

src/status_im/keycard/login.cljs

@@ -7,7 +7,7 @@
             [status-im.keycard.recovery :as recovery]
             [status-im.signing.core :as signing.core]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im2.navigation.events :as navigation]
             [taoensso.timbre :as log]))
 

src/status_im/keycard/real_keycard.cljs

@@ -6,7 +6,7 @@
             [status-im.keycard.keycard :as keycard]
             [native-module.core :as native-module]
             [react-native.platform :as platform]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [taoensso.timbre :as log]))
 
 (defonce event-emitter

src/status_im/keycard/recovery.cljs

@@ -16,7 +16,7 @@
             [utils.datetime :as datetime]
             [status-im.utils.keychain.core :as keychain]
             [react-native.platform :as platform]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im2.navigation.events :as navigation]
             [taoensso.timbre :as log]
             [utils.security.core :as security]))

src/status_im/keycard/sign.cljs

@@ -5,7 +5,7 @@
             [status-im.keycard.common :as common]
             [utils.re-frame :as rf]
             [utils.money :as money]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [taoensso.timbre :as log]))
 
 (rf/defn sign

src/status_im/keycard/simulated_keycard.cljs

@@ -9,7 +9,7 @@
             [status-im.multiaccounts.create.core :as multiaccounts.create]
             [native-module.core :as native-module]
             [status-im.node.core :as node]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im.utils.utils :as utils]
             [taoensso.timbre :as log]))
 

src/status_im/multiaccounts/create/core.cljs

@@ -11,7 +11,7 @@
             [status-im2.config :as config]
             [utils.re-frame :as rf]
             [status-im.utils.signing-phrase.core :as signing-phrase]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [utils.security.core :as security]))
 
 (defn normalize-derived-data-keys

src/status_im/multiaccounts/login/core.cljs

@@ -6,7 +6,7 @@
     [status-im.ui.components.react :as react]
     [utils.re-frame :as rf]
     [react-native.platform :as platform]
-    [status-im.utils.types :as types]
+    [status-im.utils.deprecated-types :as types]
     [utils.security.core :as security]))
 
 (re-frame/reg-fx

src/status_im/multiaccounts/recover/core.cljs

@@ -3,7 +3,7 @@
             [status-im2.constants :as constants]
             [status-im.multiaccounts.create.core :as multiaccounts.create]
             [native-module.core :as native-module]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [taoensso.timbre :as log]))
 
 (re-frame/reg-fx

src/status_im/multiaccounts/reset_password/core.cljs

@@ -5,7 +5,7 @@
             [native-module.core :as native-module]
             [status-im.popover.core :as popover]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [utils.security.core :as security]))
 
 (rf/defn on-input-change

src/status_im/multiaccounts/update/core.cljs

@@ -1,6 +1,6 @@
 (ns status-im.multiaccounts.update.core
   (:require [status-im.ethereum.ens :as ens]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im2.constants :as constants]
             [taoensso.timbre :as log]
             [utils.re-frame :as rf]))

src/status_im/node/core.cljs

@@ -3,7 +3,7 @@
             [native-module.core :as native-module]
             [status-im2.config :as config]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [clojure.string :as string]
             [react-native.platform :as platform]))
 

src/status_im/notifications/local.cljs

@@ -4,14 +4,14 @@
             [clojure.string :as string]
             [quo.platform :as platform]
             [re-frame.core :as re-frame]
-            [status-im.async-storage.core :as async-storage]
+            [react-native.async-storage :as async-storage]
             [status-im.ethereum.decode :as decode]
             [status-im.ethereum.tokens :as tokens]
             [utils.i18n :as i18n]
             [status-im.notifications.android :as pn-android]
             [utils.re-frame :as rf]
             [utils.money :as money]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im.utils.utils :as utils]
             [react-native.core :as rn]))
 

src/status_im/router/core.cljs

@@ -7,7 +7,7 @@
             [status-im.ethereum.core :as ethereum]
             [status-im.ethereum.eip681 :as eip681]
             [status-im.ethereum.ens :as ens]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [native-module.core :as native-module]
             [status-im.ethereum.stateofus :as stateofus]
             [utils.validators :as validators]

src/status_im/signing/core.cljs

@@ -16,7 +16,7 @@
     [utils.re-frame :as rf]
     [status-im.utils.hex :as utils.hex]
     [utils.money :as money]
-    [status-im.utils.types :as types]
+    [status-im.utils.deprecated-types :as types]
     [status-im.utils.utils :as utils]
     [status-im.wallet.core :as wallet]
     [status-im.wallet.prices :as prices]

src/status_im/signing/keycard.cljs

@@ -3,7 +3,7 @@
             [utils.i18n :as i18n]
             [native-module.core :as native-module]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [taoensso.timbre :as log]))
 
 (re-frame/reg-fx

src/status_im/transport/message/core.cljs

@@ -16,7 +16,7 @@
     [status-im.multiaccounts.update.core :as update.core]
     [status-im.pairing.core :as models.pairing]
     [utils.re-frame :as rf]
-    [status-im.utils.types :as types]
+    [status-im.utils.deprecated-types :as types]
     [status-im.visibility-status-updates.core :as models.visibility-status-updates]
     [status-im2.contexts.shell.activity-center.events :as activity-center]
     [status-im2.contexts.chat.messages.pin.events :as messages.pin]

src/status_im/ui/screens/privacy_and_security_settings/events.cljs

@@ -5,7 +5,7 @@
             [utils.i18n :as i18n]
             [native-module.core :as native-module]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [taoensso.timbre :as log]
             [utils.security.core :as security]))
 

src/status_im/ui/screens/signing/views.cljs

@@ -23,7 +23,7 @@
     [status-im.ui.screens.signing.styles :as styles]
     [status-im.ui.screens.wallet.components.views :as wallet.components]
     [react-native.platform :as platform]
-    [status-im.utils.types :as types]
+    [status-im.utils.deprecated-types :as types]
     [status-im.utils.utils :as utils]
     [status-im.wallet.utils :as wallet.utils]
     [utils.security.core :as security]))

src/status_im/utils/deprecated_types.cljs

@@ -1,4 +1,5 @@
-(ns status-im.utils.types
+(ns status-im.utils.deprecated-types
+  {:deprecated true :superseded-by "utils.transforms"}
   (:refer-clojure :exclude [js->clj])
   (:require [cljs-bean.core :as clj-bean]))
 

src/status_im/utils/logging/core.cljs

@@ -12,7 +12,7 @@
             [utils.re-frame :as rf]
             [utils.datetime :as datetime]
             [react-native.platform :as platform]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im2.common.log :as log]
             [status-im2.config :as config]))
 

src/status_im/utils/test.cljs

@@ -1,6 +1,6 @@
 (ns status-im.utils.test
   (:require [re-frame.core :as re-frame]
-            [status-im.utils.types :as types]))
+            [status-im.utils.deprecated-types :as types]))
 
 (def native-status (js/require "../../modules/react-native-status/nodejs/bindings"))
 

src/status_im/wallet/accounts/core.cljs

@@ -18,7 +18,7 @@
     [utils.re-frame :as rf]
     [status-im.utils.hex :as hex]
     [status-im.utils.mobile-sync :as utils.mobile-sync]
-    [status-im.utils.types :as types]
+    [status-im.utils.deprecated-types :as types]
     [status-im.wallet.core :as wallet]
     [status-im.wallet.prices :as prices]
     [status-im2.navigation.events :as navigation]

src/status_im/wallet/core.cljs

@@ -3,7 +3,7 @@
     [clojure.set :as set]
     [clojure.string :as string]
     [re-frame.core :as re-frame]
-    [status-im.async-storage.core :as async-storage]
+    [react-native.async-storage :as async-storage]
     [status-im.bottom-sheet.events :as bottom-sheet]
     [status-im.contact.db :as contact.db]
     [status-im.ethereum.core :as ethereum]
@@ -826,8 +826,8 @@
 (rf/defn get-buy-crypto-preference
   {:events [::get-buy-crypto]}
   [_]
-  {::async-storage/get {:keys [:buy-crypto-hidden]
-                        :cb   #(re-frame/dispatch [::store-buy-crypto-preference %])}})
+  {:async-storage-get {:keys [:buy-crypto-hidden]
+                       :cb   #(re-frame/dispatch [::store-buy-crypto-preference %])}})
 
 (rf/defn wallet-will-focus
   {:events [::wallet-stack]}
@@ -848,8 +848,8 @@
 (rf/defn hide-buy-crypto
   {:events [::hide-buy-crypto]}
   [{:keys [db]}]
-  {:db                  (assoc db :wallet/buy-crypto-hidden true)
-   ::async-storage/set! {:buy-crypto-hidden true}})
+  {:db                (assoc db :wallet/buy-crypto-hidden true)
+   :async-storage-set {:buy-crypto-hidden true}})
 
 (rf/defn store-buy-crypto
   {:events [::store-buy-crypto-preference]}
@@ -1025,8 +1025,8 @@
 (rf/defn switch-transactions-management-enabled
   {:events [:multiaccounts.ui/switch-transactions-management-enabled]}
   [{:keys [db]} enabled?]
-  {::async-storage/set! {:transactions-management-enabled? enabled?}
-   :db                  (assoc db :wallet/transactions-management-enabled? enabled?)})
+  {:async-storage-set {:transactions-management-enabled? enabled?}
+   :db                (assoc db :wallet/transactions-management-enabled? enabled?)})
 
 (re-frame/reg-fx
  :wallet/initialize-transactions-management-enabled

src/status_im/wallet_connect/core.cljs

@@ -7,7 +7,7 @@
             [status-im.signing.core :as signing]
             [status-im2.config :as config]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [status-im.utils.deprecated-types :as types]
             [status-im.utils.wallet-connect :as wallet-connect]
             [taoensso.timbre :as log]))
 

src/status_im2/common/async_storage.cljs

@@ -0,0 +1,7 @@
+(ns status-im2.common.async-storage
+  (:require [re-frame.core :as re-frame]
+            react-native.async-storage))
+
+(re-frame/reg-fx :async-storage-set (react-native.async-storage/set-item-factory))
+(re-frame/reg-fx :async-storage-get
+                 (fn [{ks :keys cb :cb}] (react-native.async-storage/get-items ks cb)))

src/status_im2/common/confirmation_drawer/view.cljs

@@ -11,11 +11,12 @@
   (if group-chat
     [quo/group-avatar
      {:customization-color color
-      :size                :size/s-20}]
+      :size                :size-20}]
     [quo/user-avatar
      {:full-name         display-name
       :profile-picture   photo-path
       :size              :xxs
+      :ring?             false
       :status-indicator? false}]))
 
 (defn extra-action-view

src/status_im2/common/log.cljs

@@ -2,7 +2,7 @@
   (:require [clojure.string :as string]
             [native-module.core :as native-module]
             [re-frame.core :as re-frame]
-            [status-im.utils.types :as types]
+            [utils.transforms :as transforms]
             [status-im2.config :as config]
             [taoensso.timbre :as log]
             [utils.re-frame :as rf]))
@@ -21,7 +21,7 @@
 (defn setup
   [level]
   (let [handle-error   (fn [res]
-                         (let [{:keys [error]} (types/json->clj res)]
+                         (let [{:keys [error]} (transforms/json->clj res)]
                            (when-not (string/blank? error)
                              (log/error "init statusgo logging failed" error))))
         logging-params {:enable?        true

src/status_im2/contexts/add_new_contact/events.cljs

@@ -1,7 +1,7 @@
 (ns status-im2.contexts.add-new-contact.events
   (:require [clojure.string :as string]
             [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
+            [utils.transforms :as transforms]
             [re-frame.core :as re-frame]
             [status-im.ethereum.core :as ethereum]
             [status-im.ethereum.ens :as ens]
@@ -129,7 +129,7 @@
     compressed-key
     constants/deserialization-key
     (fn [resp]
-      (let [{:keys [error]} (types/json->clj resp)]
+      (let [{:keys [error]} (transforms/json->clj resp)]
         (if error
           (on-error error)
           (on-success (str "0x" (subs resp 5)))))))))
@@ -194,6 +194,5 @@
 
 (rf/defn set-new-identity-reconnected
   [{:keys [db]}]
-  (let [input     (get-in db [:contacts/new-identity :input])
-        resubmit? (and input (= :new-contact (get-in db [:view-id])))]
+  (let [input (get-in db [:contacts/new-identity :input])]
     (rf/dispatch [:contacts/set-new-identity input])))

src/status_im2/contexts/chat/composer/effects.cljs

@@ -5,7 +5,7 @@
     [react-native.core :as rn]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [status-im.async-storage.core :as async-storage]
+    [react-native.async-storage :as async-storage]
     [status-im2.contexts.chat.composer.constants :as constants]
     [status-im2.contexts.chat.composer.keyboard :as kb]
     [status-im2.contexts.chat.composer.utils :as utils]

src/status_im2/contexts/chat/composer/keyboard.cljs

@@ -1,6 +1,6 @@
 (ns status-im2.contexts.chat.composer.keyboard
   (:require [oops.core :as oops]
-            [status-im.async-storage.core :as async-storage]
+            [react-native.async-storage :as async-storage]
             [react-native.core :as rn]
             [react-native.platform :as platform]
             [react-native.reanimated :as reanimated]))

src/status_im2/contexts/chat/events.cljs

@@ -14,11 +14,11 @@
             [status-im.data-store.chats :as chats-store]
             [status-im2.contexts.contacts.events :as contacts-store]
             [status-im.utils.clocks :as utils.clocks]
-            [status-im.utils.types :as types]
+            [utils.transforms :as transforms]
             [reagent.core :as reagent]
             [quo2.foundations.colors :as colors]
             [re-frame.core :as re-frame]
-            [status-im.async-storage.core :as async-storage]
+            [react-native.async-storage :as async-storage]
             [status-im2.contexts.shell.jump-to.constants :as shell.constants]
             [status-im2.common.muting.helpers :refer [format-mute-till]]))
 
@@ -173,9 +173,9 @@
     (chat.state/reset-visible-item)
     (rf/merge cofx
               (merge
-               {:db                  (dissoc db :current-chat-id)
-                ::async-storage/set! {:chat-id nil
-                                      :key-uid nil}}
+               {:db                (dissoc db :current-chat-id)
+                :async-storage-set {:chat-id nil
+                                    :key-uid nil}}
                (let [community-id (get-in db [:chats chat-id :community-id])]
                  ;; When navigating back from community chat to community, update switcher card
                  ;; A close chat event is also called while opening any chat.
@@ -234,7 +234,7 @@
 (rf/defn handle-one-to-one-chat-created
   {:events [:chat/one-to-one-chat-created]}
   [{:keys [db]} chat-id response-js]
-  (let [chat       (chats-store/<-rpc (first (types/js->clj (.-chats ^js response-js))))
+  (let [chat       (chats-store/<-rpc (first (transforms/js->clj (.-chats ^js response-js))))
         contact-js (first (.-contacts ^js response-js))
         contact    (when contact-js (contacts-store/<-rpc-js contact-js))]
     {:db       (cond-> db

src/status_im2/contexts/chat/group_details/view.cljs

@@ -169,7 +169,7 @@
                :padding-horizontal 20}}
       [quo/group-avatar
        {:customization-color color
-        :size                :size/s-32}]
+        :size                :size-32}]
       [quo/text
        {:weight :semi-bold
         :size   :heading-1

src/status_im2/contexts/chat/home/chat_list_item/view.cljs

@@ -181,7 +181,7 @@
          (assoc :ring? false))])
     [quo/group-avatar
      {:customization-color color
-      :size                :size/s-32}]))
+      :size                :size-32}]))
 
 (defn notification
   [{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}]

src/status_im2/contexts/chat/messages/content/deleted/view.cljs

@@ -17,6 +17,7 @@
      {:full-name         display-name
       :profile-picture   profile-picture
       :status-indicator? false
+      :ring?             false
       :size              :xxxs}]]
    [quo/text
     {:weight          :semi-bold

src/status_im2/contexts/chat/messages/list/view.cljs

@@ -8,7 +8,6 @@
     [react-native.hooks :as hooks]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [reagent.core :as reagent]
     [status-im.ui.screens.chat.group :as chat.group]
     [status-im.ui.screens.chat.message.gap :as message.gap]
     [status-im2.constants :as constants]
@@ -28,11 +27,7 @@
 (defonce ^:const scroll-animation-input-range [50 125])
 (defonce ^:const min-message-height 32)
 
-(defonce extra-keyboard-height (reagent/atom 0))
 (defonce messages-list-ref (atom nil))
-(defonce messages-view-height (reagent/atom 0))
-(defonce messages-view-header-height (reagent/atom 0))
-(defonce show-floating-scroll-down-button? (reagent/atom false))
 
 (defn list-key-fn [{:keys [message-id value]}] (or message-id value))
 (defn list-ref [ref] (reset! messages-list-ref ref))
@@ -44,7 +39,7 @@
                             {:animated true})))
 
 (defn on-scroll
-  [evt]
+  [evt show-floating-scroll-down-button?]
   (let [y                  (oops/oget evt "nativeEvent.contentOffset.y")
         layout-height      (oops/oget evt "nativeEvent.layoutMeasurement.height")
         threshold-height   (* (/ layout-height 100)
@@ -115,7 +110,7 @@
    :animated?     animated?})
 
 (defn loading-view
-  [chat-id]
+  [chat-id messages-view-height messages-view-header-height]
   (let [loading-messages?   (rf/sub [:chats/loading-messages? chat-id])
         all-loaded?         (rf/sub [:chats/all-loaded? chat-id])
         messages            (rf/sub [:chats/raw-chat-messages-stream chat-id])
@@ -194,7 +189,8 @@
                                                       chat-id]))}]}]))
 
 (defn f-list-footer
-  [{:keys [chat scroll-y cover-bg-color on-layout theme]}]
+  [{:keys [chat scroll-y cover-bg-color on-layout theme messages-view-height
+           messages-view-header-height]}]
   (let [{:keys [chat-id chat-name emoji chat-type
                 group-chat]} chat
         all-loaded?          (rf/sub [:chats/all-loaded? chat-id])
@@ -238,7 +234,7 @@
           [quo/text {:style style/bio}
            bio])
         [actions chat-id cover-bg-color]]]]
-     [loading-view chat-id]]))
+     [loading-view chat-id messages-view-height messages-view-header-height]]))
 
 (defn list-footer
   [props]
@@ -249,7 +245,7 @@
   [rn/view
    [chat.group/group-chat-footer chat-id invitation-admin]])
 (defn footer-on-layout
-  [e]
+  [e messages-view-header-height]
   (let [height (oops/oget e "nativeEvent.layout.height")
         y      (oops/oget e "nativeEvent.layout.y")]
     (reset! messages-view-header-height (+ height y))))
@@ -279,14 +275,17 @@
     (reanimated/set-shared-value scroll-y (- content-size-y current-y))))
 
 (defn f-messages-list-content
-  [{:keys [chat insets scroll-y content-height cover-bg-color keyboard-shown?]}]
-  (let [theme                     (quo.theme/use-theme-value)
-        {window-height :height}   (rn/get-window)
-        {:keys [keyboard-height]} (hooks/use-keyboard)
-        context                   (rf/sub [:chats/current-chat-message-list-view-context])
-        messages                  (rf/sub [:chats/raw-chat-messages-stream (:chat-id chat)])
-        recording?                (rf/sub [:chats/recording?])
-        all-loaded?               (rf/sub [:chats/all-loaded? (:chat-id chat)])]
+  [{:keys [chat insets scroll-y content-height cover-bg-color keyboard-shown? inner-state-atoms]}]
+  (let [theme                                 (quo.theme/use-theme-value)
+        {window-height :height}               (rn/get-window)
+        {:keys [keyboard-height]}             (hooks/use-keyboard)
+        context                               (rf/sub [:chats/current-chat-message-list-view-context])
+        messages                              (rf/sub [:chats/raw-chat-messages-stream (:chat-id chat)])
+        recording?                            (rf/sub [:chats/recording?])
+        all-loaded?                           (rf/sub [:chats/all-loaded? (:chat-id chat)])
+        {:keys [show-floating-scroll-down-button?
+                messages-view-height
+                messages-view-header-height]} inner-state-atoms]
     [rn/view {:style {:flex 1}}
      [rn/flat-list
       {:key-fn                            list-key-fn
@@ -296,11 +295,15 @@
                                            (when (= (:chat-type chat) constants/private-group-chat-type)
                                              [list-group-chat-header chat])]
        :footer                            [list-footer
-                                           {:theme          theme
-                                            :chat           chat
-                                            :scroll-y       scroll-y
-                                            :cover-bg-color cover-bg-color
-                                            :on-layout      footer-on-layout}]
+                                           {:theme                       theme
+                                            :chat                        chat
+                                            :scroll-y                    scroll-y
+                                            :cover-bg-color              cover-bg-color
+                                            :on-layout                   #(footer-on-layout
+                                                                           %
+                                                                           messages-view-header-height)
+                                            :messages-view-header-height messages-view-header-height
+                                            :messages-view-height        messages-view-height}]
        :data                              messages
        :render-data                       {:theme           theme
                                            :context         context
@@ -339,8 +342,7 @@
        :scroll-event-throttle             16
        :on-scroll                         (fn [event]
                                             (scroll-handler event scroll-y)
-                                            (when on-scroll
-                                              (on-scroll event)))
+                                            (on-scroll event show-floating-scroll-down-button?))
        :style                             (add-inverted-y-android
                                            {:background-color (if all-loaded?
                                                                 (colors/theme-colors

src/status_im2/contexts/chat/messages/view.cljs

@@ -13,10 +13,8 @@
     [status-im2.contexts.chat.messages.navigation.view :as messages.navigation]
     [utils.re-frame :as rf]))
 
-(defonce extra-keyboard-height (reagent/atom 0))
-
 (defn f-chat
-  []
+  [{:keys [extra-keyboard-height show-floating-scroll-down-button?] :as inner-state-atoms}]
   (let [insets                                   (safe-area/get-insets)
         scroll-y                                 (reanimated/use-shared-value 0)
         content-height                           (reanimated/use-shared-value 0)
@@ -63,12 +61,13 @@
       :keyboard-vertical-offset (- (:bottom insets))}
 
      [list.view/message-list-content-view
-      {:chat            chat
-       :insets          insets
-       :scroll-y        scroll-y
-       :content-height  content-height
-       :cover-bg-color  :turquoise
-       :keyboard-shown? keyboard-shown}]
+      {:chat              chat
+       :insets            insets
+       :scroll-y          scroll-y
+       :content-height    content-height
+       :cover-bg-color    :turquoise
+       :keyboard-shown?   keyboard-shown
+       :inner-state-atoms inner-state-atoms}]
 
      [messages.navigation/navigation-view
       {:scroll-y            scroll-y
@@ -83,9 +82,14 @@
        [:f> composer.view/composer
         {:insets                            insets
          :scroll-to-bottom-fn               list.view/scroll-to-bottom
-         :show-floating-scroll-down-button? list.view/show-floating-scroll-down-button?}]
+         :show-floating-scroll-down-button? show-floating-scroll-down-button?}]
        [contact-requests.bottom-drawer/view chat-id contact-request-state group-chat])]))
 
 (defn chat
   []
-  [:f> f-chat])
+  (let [inner-state-atoms
+        {:extra-keyboard-height             (reagent/atom 0)
+         :show-floating-scroll-down-button? (reagent/atom false)
+         :messages-view-height              (reagent/atom 0)
+         :messages-view-header-height       (reagent/atom 0)}]
+    [:f> f-chat inner-state-atoms]))

src/status_im2/contexts/communities/discover/view.cljs

@@ -23,7 +23,6 @@
         :on-press  #(rf/dispatch [:communities/navigate-to-community (:id item)])}]
       [quo/community-list-item
        {:on-press      (fn []
-                         (rf/dispatch [:communities/load-category-states (:id item)])
                          (rf/dispatch [:dismiss-keyboard])
                          (rf/dispatch [:communities/navigate-to-community (:id item)]))
         :on-long-press #(rf/dispatch
@@ -147,7 +146,6 @@
 
              [quo/community-list-item
               {:on-press      (fn []
-                                (rf/dispatch [:communities/load-category-states (:id community)])
                                 (rf/dispatch [:dismiss-keyboard])
                                 (rf/dispatch [:communities/navigate-to-community (:id community)]))
                :on-long-press #(js/alert "TODO: to be implemented")}

src/status_im2/contexts/communities/overview/view.cljs

@@ -24,7 +24,7 @@
      [quo/preview-list
       {:type   :user
        :number (count user-list)
-       :size   :size/s-24}
+       :size   :size-24}
       user-list]
      [quo/text
       {:accessibility-label :communities-screen-title

src/status_im2/contexts/contacts/events.cljs

@@ -1,7 +1,7 @@
 (ns status-im2.contexts.contacts.events
   (:require
     [oops.core :as oops]
-    [status-im.utils.types :as types]
+    [utils.transforms :as transforms]
     [status-im2.constants :as constants]
     [taoensso.timbre :as log]
     [utils.i18n :as i18n]
@@ -15,7 +15,7 @@
    :secondary-name        (.-secondaryName js-contact)
    :ens-name              (.-name js-contact)
    :nickname              (.-localNickname js-contact)
-   :images                (types/js->clj (oops/oget js-contact "images"))
+   :images                (transforms/js->clj (oops/oget js-contact "images"))
    :ens-verified          (oops/oget js-contact "ensVerified")
    :contact-request-state (oops/oget js-contact "contactRequestState")
    :last-updated          (oops/oget js-contact "lastUpdated")

src/status_im2/contexts/onboarding/common/background/view.cljs

@@ -6,7 +6,7 @@
             [oops.core :refer [oget]]
             [react-native.platform :as platform]
             [status-im2.common.resources :as resources]
-            [status-im.async-storage.core :as async-storage]
+            [react-native.async-storage :as async-storage]
             [status-im2.contexts.shell.jump-to.state :as shell.state]
             [status-im2.contexts.onboarding.common.carousel.view :as carousel]
             [status-im2.contexts.onboarding.common.background.style :as style]

src/status_im2/contexts/onboarding/events.cljs

@@ -1,7 +1,7 @@
 (ns status-im2.contexts.onboarding.events
   (:require [native-module.core :as native-module]
             [re-frame.core :as re-frame]
-            [status-im.utils.types :as types]
+            [utils.transforms :as transforms]
             [status-im2.constants :as constants]
             [taoensso.timbre :as log]
             [utils.i18n :as i18n]
@@ -17,7 +17,7 @@
    (native-module/validate-mnemonic
     (security/safe-unmask-data mnemonic)
     (fn [result]
-      (let [{:keys [error keyUID]} (types/json->clj result)]
+      (let [{:keys [error keyUID]} (transforms/json->clj result)]
         (if (seq error)
           (when on-error (on-error error))
           (on-success mnemonic keyUID)))))))

src/status_im2/contexts/profile/config.cljs

@@ -2,7 +2,7 @@
   (:require [status-im2.config :as config]
             [native-module.core :as native-module]
             [clojure.string :as string]
-            [utils.transforms :as types]
+            [utils.transforms :as transforms]
             [utils.re-frame :as rf]))
 
 (defn login
@@ -47,7 +47,7 @@
 (rf/defn get-node-config-callback
   {:events [:profile.config/get-node-config-callback]}
   [{:keys [db]} node-config-json]
-  (let [node-config (types/json->clj node-config-json)]
+  (let [node-config (transforms/json->clj node-config-json)]
     {:db (assoc-in db
           [:profile/profile :wakuv2-config]
           (get node-config :WakuV2Config))}))

src/status_im2/contexts/profile/profiles/view.cljs

@@ -16,7 +16,7 @@
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]
             [utils.security.core :as security]
-            [utils.transforms :as types]))
+            [utils.transforms :as transforms]))
 
 (defonce push-animation-fn-atom (atom nil))
 (defonce pop-animation-fn-atom (atom nil))
@@ -77,7 +77,7 @@
                            (native-module/delete-multiaccount
                             key-uid
                             (fn [result]
-                              (let [{:keys [error]} (types/json->clj result)]
+                              (let [{:keys [error]} (transforms/json->clj result)]
                                 (rf/dispatch [:onboarding-2/on-delete-profile-success key-uid])
                                 (log/info "profile deleted: error" error)))))}])
 

src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs

@@ -7,15 +7,15 @@
 (def descriptor
   [{:key     :size
     :type    :select
-    :options [{:key   :size/s-20
+    :options [{:key   :size-20
                :value "20"}
-              {:key   :size/s-28
+              {:key   :size-28
                :value "28"}
-              {:key   :size/s-32
+              {:key   :size-32
                :value "32"}
-              {:key   :size/s-48
+              {:key   :size-48
                :value "48"}
-              {:key   :size/s-80
+              {:key   :size-80
                :value "80"}]}
    {:label "Avatar:"
     :key   :picture?
@@ -27,7 +27,7 @@
 (defn view
   []
   (let [state (reagent/atom {:customization-color :blue
-                             :size                :size/s-20
+                             :size                :size-20
                              :picture?            false})]
     (fn []
       [preview/preview-container {:state state :descriptor descriptor}

src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs

@@ -6,10 +6,10 @@
 (def descriptor
   [{:key     :size
     :type    :select
-    :options [{:key :size/s-20}
-              {:key :size/s-24}
-              {:key :size/s-32}
-              {:key :size/s-48}]}
+    :options [{:key :size-20}
+              {:key :size-24}
+              {:key :size-32}
+              {:key :size-48}]}
    {:key     :icon
     :type    :select
     :options [{:key   :i/placeholder20
@@ -20,7 +20,7 @@
 
 (defn view
   []
-  (let [state (reagent/atom {:size  :size/s-48
+  (let [state (reagent/atom {:size  :size-48
                              :icon  :i/placeholder20
                              :color :primary})]
     (fn []

src/status_im2/contexts/quo_preview/browser/browser_input.cljs

@@ -1,55 +1,28 @@
 (ns status-im2.contexts.quo-preview.browser.browser-input
   (:require [quo2.core :as quo]
-            [react-native.core :as rn]
-            [react-native.safe-area :as safe-area]
             [reagent.core :as reagent]
-            [utils.re-frame :as rf]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Show Favicon"
-    :key   :favicon?
-    :type  :boolean}
-   {:label "Locked"
-    :key   :locked?
-    :type  :boolean}
-   {:label "Disabled"
-    :key   :disabled?
-    :type  :boolean}])
+  [{:key :favicon? :type :boolean}
+   {:key :locked? :type :boolean}
+   {:key :blur? :type :boolean}
+   {:key :placeholder :type :text}
+   {:key :disabled? :type :boolean}
+   (preview/customization-color-option)])
 
-(defn preview-browser-input
+(defn view
   []
-  (reagent/with-let [keyboard-shown?        (reagent/atom false)
-                     keyboard-show-listener (.addListener rn/keyboard
-                                                          "keyboardWillShow"
-                                                          #(reset! keyboard-shown? true))
-                     keyboard-hide-listener (.addListener rn/keyboard
-                                                          "keyboardWillHide"
-                                                          #(reset! keyboard-shown? false))
-                     {:keys [bottom]}       (safe-area/get-insets)
-                     state                  (reagent/atom {:blur?       false
-                                                           :disabled?   false
-                                                           :favicon?    false
-                                                           :placeholder "Search or enter dapp domain"
-                                                           :locked?     false})]
-    [preview/preview-container
-     {:state      state
-      :descriptor descriptor}
-     [quo/page-nav
-      {:type      :no-title
-       :icon-name :i/arrow-left
-       :on-press  #(rf/dispatch [:navigate-back])}]
-
-     [rn/flat-list
-      {:key-fn                       str
-       :keyboard-should-persist-taps :always
-       :style                        {:flex 1}}]
-     [rn/view
-      [quo/browser-input
-       (assoc @state
-              :customization-color :blue
-              :favicon             (when (:favicon? @state) :i/verified))]
-      [rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]
-    (finally
-     (.remove keyboard-show-listener)
-     (.remove keyboard-hide-listener))))
+  (let [state (reagent/atom {:blur?       false
+                             :disabled?   false
+                             :favicon?    false
+                             :placeholder "Search or enter dapp domain"
+                             :locked?     false})]
+    (fn []
+      [preview/preview-container
+       {:state      state
+        :descriptor descriptor}
+       [quo/browser-input
+        (assoc @state
+               :favicon
+               (when (:favicon? @state) :i/verified))]])))

src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs

@@ -24,15 +24,15 @@
                :value "Network"}]}
    {:key     :size
     :type    :select
-    :options [{:key   :size/s-32
+    :options [{:key   :size-32
                :value "32"}
-              {:key   :size/s-24
+              {:key   :size-24
                :value "24"}
-              {:key   :size/s-20
+              {:key   :size-20
                :value "20"}
-              {:key   :size/s-16
+              {:key   :size-16
                :value "16"}
-              {:key   :size/s-14
+              {:key   :size-14
                :value "14"}]}
    {:key  :number
     :type :text}
@@ -104,10 +104,9 @@
 
 (defn view
   []
-  (let [state (reagent/atom {:type               :accounts
-                             :size               :size/s-32
-                             :number             4
-                             :more-than-99-label "99+"})
+  (let [state (reagent/atom {:type   :accounts
+                             :size   :size-32
+                             :number 4})
         type  (reagent/cursor state [:type])
         blur? (reagent/cursor state [:blur?])]
     (fn []

src/status_im2/contexts/quo_preview/list_items/token_value.cljs

@@ -1,42 +1,23 @@
 (ns status-im2.contexts.quo-preview.list-items.token-value
   (:require
     [quo2.core :as quo]
-    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Token:"
-    :key     :token
+  [{:key     :token
     :type    :select
-    :options [{:key   :eth
-               :value "ETH"}
-              {:key   :snt
-               :value "SNT"}]}
-   {:label   "State:"
-    :key     :state
+    :options [{:key :eth}
+              {:key :snt}]}
+   {:key     :status
     :type    :select
-    :options [{:key   :default
-               :value "Default"}
-              {:key   :pressed
-               :value "Pressed"}
-              {:key   :active
-               :value "Active"}]}
-   {:label   "Status:"
-    :key     :status
-    :type    :select
-    :options [{:key   :empty
-               :value "Empty"}
-              {:key   :positive
-               :value "Positive"}
-              {:key   :negative
-               :value "Negative"}]}
+    :options [{:key :empty}
+              {:key :positive}
+              {:key :negative}]}
    (preview/customization-color-option)
-   {:label "Metrics?:"
-    :key   :metrics?
-    :type  :boolean}])
+   {:key :metrics? :type :boolean}])
 
-(defn preview
+(defn view
   []
   (let [state (reagent/atom {:token               :snt
                              :state               :default
@@ -49,11 +30,9 @@
                                                    :fiat-change       "€0.00"}})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view
-        [rn/view
-         {:style {:align-items :center
-                  :margin-top  50}}
-         [quo/token-value @state]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:align-items :center
+                                    :margin-top  50}}
+       [quo/token-value @state]])))
 

src/status_im2/contexts/quo_preview/list_items/user_list.cljs

@@ -1,35 +1,19 @@
 (ns status-im2.contexts.quo-preview.list-items.user-list
-  (:require [react-native.core :as rn]
-            [reagent.core :as reagent]
+  (:require [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]
-            [quo2.components.list-items.user-list :as user-list]
+            [quo2.core :as quo]
             [utils.address :as address]))
 
 (def descriptor
-  [{:label "Primary name"
-    :key   :primary-name
+  [{:key   :primary-name
     :type  :text
     :limit 24}
-   {:label "Secondary name"
-    :key   :secondary-name
-    :type  :text}
-   {:label "Chat key"
-    :key   :chat-key
-    :type  :text}
-   {:label "Is contact?"
-    :key   :contact?
-    :type  :boolean}
-   {:label "Is verified?"
-    :key   :verified?
-    :type  :boolean}
-   {:label "Is untrustworthy?"
-    :key   :untrustworthy?
-    :type  :boolean}
-   {:label "Online?"
-    :key   :online?
-    :type  :boolean}
-   {:label   "Accessory:"
-    :key     :accessory
+   {:key :secondary-name :type :text}
+   {:key :contact? :type :boolean}
+   {:key :verified? :type :boolean}
+   {:key :untrustworthy? :type :boolean}
+   {:key :online? :type :boolean}
+   {:key     :accessory
     :type    :select
     :options [{:key   {:type :options}
                :value "Options"}
@@ -38,7 +22,7 @@
               {:key   {:type :close}
                :value "Close"}]}])
 
-(defn preview-user-list
+(defn view
   []
   (let [state (reagent/atom {:primary-name   "Alisher Yakupov"
                              :short-chat-key (address/get-shortened-compressed-key
@@ -50,11 +34,8 @@
                              :online?        false})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical    60
-          :padding--horizontal 15
-          :justify-content     :center}
-         [user-list/user-list @state]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical   30
+                                    :padding-horizontal 15}}
+       [quo/user-list @state]])))

src/status_im2/contexts/quo_preview/main.cljs

@@ -169,7 +169,7 @@
                        {:name      :wallet-ctas
                         :component wallet-ctas/view}]
    :browser           [{:name      :browser-input
-                        :component browser-input/preview-browser-input}]
+                        :component browser-input/view}]
    :calendar          [{:name      :calendar
                         :component calendar/view}
                        {:name      :calendar-day
@@ -275,10 +275,10 @@
                        {:name      :preview-lists
                         :component preview-lists/view}
                        {:name      :token-value
-                        :component token-value/preview}
+                        :component token-value/view}
                        {:name      :user-list
                         :options   {:topBar {:visible true}}
-                        :component user-list/preview-user-list}]
+                        :component user-list/view}]
    :loaders           [{:name      :skeleton-list
                         :options   {:topBar {:visible true}}
                         :component skeleton-list/view}]
@@ -287,27 +287,27 @@
                        {:name      :markdown-list
                         :component markdown-list/view}]
    :messages          [{:name      :gap
-                        :component messages-gap/preview-messages-gap}
+                        :component messages-gap/view}
                        {:name      :system-messages
-                        :component system-message/preview-system-message}
+                        :component system-message/view}
                        {:name      :author
                         :component messages-author/view}]
    :navigation        [{:name      :bottom-nav-tab
-                        :component bottom-nav-tab/preview-bottom-nav-tab}
+                        :component bottom-nav-tab/view}
                        {:name      :top-nav
-                        :component top-nav/preview}
+                        :component top-nav/view}
                        {:name      :page-nav
-                        :component page-nav/preview-page-nav}
+                        :component page-nav/view}
                        {:name      :floating-shell-button
-                        :component floating-shell-button/preview-floating-shell-button}]
+                        :component floating-shell-button/view}]
    :notifications     [{:name      :activity-logs
                         :component activity-logs/preview-activity-logs}
                        {:name      :activity-logs-photos
                         :component activity-logs-photos/preview-activity-logs-photos}
                        {:name      :toast
-                        :component toast/preview-toasts}
+                        :component toast/view}
                        {:name      :notification
-                        :component notification/preview-notification}]
+                        :component notification/view}]
    :onboarding        [{:name      :small-option-card
                         :component small-option-card/preview-small-option-card}]
    :password          [{:name      :tips

src/status_im2/contexts/quo_preview/messages/gap.cljs

@@ -8,7 +8,7 @@
   [{:key :timestamp-far :type :text}
    {:key :timestamp-near :type :text}])
 
-(defn preview-messages-gap
+(defn view
   []
   (let [state (reagent/atom {:timestamp-far          "Jan 8 · 09:12"
                              :timestamp-near         "Mar 8 · 22:42"

src/status_im2/contexts/quo_preview/messages/system_message.cljs

@@ -30,7 +30,7 @@
          {:child        (when (= (:type @state) :pinned) [rn/text (:content @state)])
           :display-name (:pinned-by @state)}))
 
-(defn preview-system-message
+(defn view
   []
   (let [state (reagent/atom {:type      :pinned
                              :pinned-by "Steve"

src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs

@@ -1,15 +1,12 @@
 (ns status-im2.contexts.quo-preview.navigation.bottom-nav-tab
-  (:require [clojure.string :as string]
-            [quo2.components.navigation.bottom-nav-tab.view :as quo2]
+  (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [react-native.reanimated :as reanimated]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Type"
-    :key     :icon
+  [{:key     :icon
     :type    :select
     :options [{:key   :i/communities
                :value "Communities"}
@@ -19,33 +16,15 @@
                :value "Wallet"}
               {:key   :i/browser
                :value "Browser"}]}
-   {:label "Selected?"
-    :key   :selected?
-    :type  :boolean}
-   {:label "Pass through?"
-    :key   :pass-through?
-    :type  :boolean}
-   {:label "New Notifications?"
-    :key   :new-notifications?
-    :type  :boolean}
-   {:label   "Notification Indicator"
-    :key     :notification-indicator
+   {:key :selected? :type :boolean}
+   {:key :pass-through? :type :boolean}
+   {:key :new-notifications? :type :boolean}
+   {:key     :notification-indicator
     :type    :select
-    :options [{:key   :counter
-               :value :counter}
-              {:key   :unread-dot
-               :value :unread-dot}]}
-   {:label "Counter Label"
-    :key   :counter-label
-    :type  :text}
-
-   {:label   "Customization color"
-    :key     :customization-color
-    :type    :select
-    :options (map (fn [[k _]]
-                    {:key   k
-                     :value (string/capitalize (name k))})
-                  colors/customization)}])
+    :options [{:key :counter}
+              {:key :unread-dot}]}
+   {:key :counter-label :type :text}
+   (preview/customization-color-option)])
 
 (defn get-icon-color
   [selected? pass-through?]
@@ -60,11 +39,11 @@
     (reanimated/set-shared-value
      icon-color-anim
      (get-icon-color selected? pass-through?))
-    [quo2/bottom-nav-tab
+    [quo/bottom-nav-tab
      (merge state {:icon-color-anim icon-color-anim})
      (:value state)]))
 
-(defn preview-bottom-nav-tab
+(defn view
   []
   (let [state         (reagent/atom {:icon                   :i/communities
                                      :new-notifications?     true
@@ -76,10 +55,8 @@
         pass-through? (reagent/cursor state [:pass-through?])]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [:f> f-bottom-tab @state @selected? @pass-through?]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical 60
+                                    :align-items      :center}}
+       [:f> f-bottom-tab @state @selected? @pass-through?]])))

src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs

@@ -1,29 +1,18 @@
 (ns status-im2.contexts.quo-preview.navigation.floating-shell-button
   (:require [quo2.core :as quo]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [utils.i18n :as i18n]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Show jump to?"
-    :key   :show-jump-to?
-    :type  :boolean}
-   {:label "Show search?"
-    :key   :show-search?
-    :type  :boolean}
-   {:label "Show mention?"
-    :key   :show-mention?
-    :type  :boolean}
-   {:label   "Scroll Type"
-    :key     :scroll-type
+  [{:key :show-jump-to? :type :boolean}
+   {:key :show-search? :type :boolean}
+   {:key :show-mention? :type :boolean}
+   {:key     :scroll-type
     :type    :select
-    :options [{:key   :notification-up
-               :value "Notification Up"}
-              {:key   :notification-down
-               :value "Notification Down"}
-              {:key   :scroll-to-bottom
-               :value "Scroll To Bottom"}]}])
+    :options [{:key :notification-up}
+              {:key :notification-down}
+              {:key :scroll-to-bottom}]}])
 
 (defn mock-data
   [{:keys [show-jump-to? show-search? show-mention? scroll-type]}]
@@ -41,16 +30,14 @@
     (= scroll-type :scroll-to-bottom)
     (assoc :scroll-to-bottom {:on-press #()})))
 
-(defn preview-floating-shell-button
+(defn view
   []
   (let [state (reagent/atom {:show-jump-to? true
                              :scroll-type   :notification-down})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo/floating-shell-button (mock-data @state) nil]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical 60
+                                    :align-items      :center}}
+       [quo/floating-shell-button (mock-data @state) nil]])))

src/status_im2/contexts/quo_preview/navigation/page_nav.cljs

@@ -2,43 +2,31 @@
   (:require [clojure.string :as string]
             [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [react-native.blur :as blur]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def ^:private descriptor
-  [{:label   "Type"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :no-title
-               :value "No Title"}
-              {:key   :title
-               :value "Title"}
-              {:key   :dropdown
-               :value "Dropdown"}
-              {:key   :token
-               :value "Token"}
-              {:key   :channel
-               :value "Channel"}
+    :options [{:key :no-title}
+              {:key :title}
+              {:key :dropdown}
+              {:key :token}
+              {:key :channel}
               {:key   :title-description
                :value "Title + Description"}
-              {:key   :wallet-networks
-               :value "Wallet Networks"}
-              {:key   :community
-               :value "Community"}
-              {:key   :network
-               :value "Network"}]}
-   {:label   "Background"
-    :key     :background
+              {:key :wallet-networks}
+              {:key :community}
+              {:key :network}]}
+   {:key     :background
     :type    :select
     :options (map (fn [bg-type]
                     {:key   bg-type
                      :value (string/capitalize (name bg-type))})
                   [:white :neutral-5 :neutral-90 :neutral-95 :neutral-100 :photo :blur])}
-   {:label   "Icon"
-    :key     :icon-name
+   {:key     :icon-name
     :type    :select
     :options [{:key   :i/placeholder
                :value "Placeholder"}
@@ -60,79 +48,55 @@
       :value "3 actions"}]))
 
 (def account-switcher
-  {:key   :account-switcher
-   :value "Account-switcher"})
+  {:key :account-switcher})
 
 (def no-title-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options (conj right-side-options account-switcher)}])
 
 (def title-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options (conj right-side-options account-switcher)}
-   {:label "Title"
-    :key   :title
-    :type  :text}
-   {:label   "Text Align"
-    :key     :text-align
+   {:key :title :type :text}
+   {:key     :text-align
     :type    :select
-    :options [{:key   :left
-               :value "Left"}
-              {:key   :center
-               :value "Center"}]}])
+    :options [{:key :left}
+              {:key :center}]}])
 
 (def dropdown-descriptor
-  [{:label "Dropdown Selected?"
-    :key   :dropdown-selected?
-    :type  :boolean}
-   {:label "Dropdown Text"
-    :key   :dropdown-text
-    :type  :text}])
+  [{:key :dropdown-selected? :type :boolean}
+   {:key :dropdown-text :type :text}])
 
 (def token-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options (conj right-side-options account-switcher)}
-
-   {:label   "Token Logo"
-    :key     :token-logo
+   {:key     :token-logo
     :type    :select
     :options [{:key   (resources/get-mock-image :status-logo)
                :value "Status logo"}
               {:key   (resources/get-mock-image :rarible)
                :value "Rarible"}]}
-
-   {:label "Token Name"
-    :key   :token-name
-    :type  :text}
-   {:label "Token Abbreviation"
-    :key   :token-abbreviation
-    :type  :text}])
+   {:key  :token-name
+    :type :text}
+   {:key  :token-abbreviation
+    :type :text}])
 
 (def channel-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options right-side-options}
-
-   {:label   "Channel Emoji"
-    :key     :channel-emoji
+   {:key     :channel-emoji
     :type    :select
     :options [{:key   "🍇"
                :value "🍇"}
               {:key   "🍑"
                :value "🍑"}]}
 
-   {:label "Channel Name"
-    :key   :channel-name
-    :type  :text}
-   {:label   "Channel Icon"
-    :key     :channel-icon
+   {:key :channel-name :type :text}
+   {:key     :channel-icon
     :type    :select
     :options [{:key   :i/locked
                :value "Locked"}
@@ -140,18 +104,12 @@
                :value "Unlocked"}]}])
 
 (def title-description-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options (butlast right-side-options)}
-   {:label "title"
-    :key   :title
-    :type  :text}
-   {:label "description"
-    :key   :description
-    :type  :text}
-   {:label   "Picture"
-    :key     :picture
+   {:key :title :type :text}
+   {:key :description :type :text}
+   {:key     :picture
     :type    :select
     :options [{:key   nil
                :value "No picture"}
@@ -161,74 +119,49 @@
                :value "Photo 2"}]}])
 
 (def wallet-networks-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options (conj (take 2 right-side-options) account-switcher)}])
 
 (def community-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options right-side-options}
-   {:label   "Community Logo"
-    :key     :community-logo
+   {:key     :community-logo
     :type    :select
     :options [{:key   (resources/get-mock-image :diamond)
                :value "Diamond"}
               {:key   (resources/get-mock-image :coinbase)
                :value "Coinbase"}]}
-   {:label "Community name"
-    :key   :community-name
-    :type  :text}])
+   {:key :community-name :type :text}])
 
 (def network-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options right-side-options}
-   {:label   "Network Logo"
-    :key     :network-logo
+   {:key     :network-logo
     :type    :select
     :options [{:key   (resources/get-mock-image :diamond)
                :value "Diamond"}
               {:key   (resources/get-mock-image :coinbase)
                :value "Coinbase"}]}
-   {:label "Network name"
-    :key   :network-name
-    :type  :text}])
+   {:key  :network-name
+    :type :text}])
 
 (defn- photo-bg
   [background]
-  (when (#{:photo :blur} background)
+  (when (#{:photo} background)
     [rn/image
      {:style  {:position :absolute
                :top      0
                :bottom   0
-               :left     0
+               :left     20
                :right    0
                :width    "100%"
                :height   200}
       :source (resources/get-mock-image :photo2)}]))
 
-(defn- blur-bg
-  [background]
-  (when (= :blur background)
-    [rn/view
-     {:style {:position :absolute
-              :top      0
-              :bottom   0
-              :left     0
-              :right    0
-              :width    "100%"
-              :height   200}}
-     [blur/view
-      {:style       {:width  "100%"
-                     :height 20}
-       :blur-type   :light
-       :blur-amount 20}]]))
-
-(defn preview-page-nav
+(defn view
   [{:keys [theme]}]
   (let [state (reagent/atom
                {:type               :title-description
@@ -257,30 +190,30 @@
                 :network-logo       (resources/get-mock-image :diamond)})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor (concat descriptor
-                            (case (:type @state)
-                              :no-title          no-title-descriptor
-                              :title             title-descriptor
-                              :dropdown          dropdown-descriptor
-                              :token             token-descriptor
-                              :channel           channel-descriptor
-                              :title-description title-description-descriptor
-                              :wallet-networks   wallet-networks-descriptor
-                              :community         community-descriptor
-                              :network           network-descriptor
-                              nil))}
-       [rn/view
-        {:style {:background-color (case (:background @state)
-                                     :white       colors/white
-                                     :neutral-5   colors/neutral-5
-                                     :neutral-90  colors/neutral-90
-                                     :neutral-95  colors/neutral-95
-                                     :neutral-100 colors/neutral-100
-                                     nil)
-                 :padding-vertical 40
-                 :height           200
-                 :width            "100%"}}
-        [photo-bg (:background @state)]
-        [blur-bg (:background @state)]
-        [quo/page-nav @state]]])))
+       {:state                     state
+        :descriptor                (concat descriptor
+                                           (case (:type @state)
+                                             :no-title          no-title-descriptor
+                                             :title             title-descriptor
+                                             :dropdown          dropdown-descriptor
+                                             :token             token-descriptor
+                                             :channel           channel-descriptor
+                                             :title-description title-description-descriptor
+                                             :wallet-networks   wallet-networks-descriptor
+                                             :community         community-descriptor
+                                             :network           network-descriptor
+                                             nil))
+        :blur?                     (= :blur (:background @state))
+        :show-blur-background?     (= :blur (:background @state))
+        :component-container-style {:background-color (case (:background @state)
+                                                        :white       colors/white
+                                                        :neutral-5   colors/neutral-5
+                                                        :neutral-90  colors/neutral-90
+                                                        :neutral-95  colors/neutral-95
+                                                        :neutral-100 colors/neutral-100
+                                                        nil)
+                                    :margin-vertical  40
+                                    :width            "100%"}}
+
+       [photo-bg (:background @state)]
+       [quo/page-nav @state]])))

src/status_im2/contexts/quo_preview/navigation/top_nav.cljs

@@ -1,11 +1,8 @@
 (ns status-im2.contexts.quo-preview.navigation.top-nav
   (:require [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [quo2.core :as quo]
-            [status-im2.contexts.quo-preview.preview :as preview]
-            [status-im2.common.resources :as resources]
-            [quo2.theme :as quo.theme]))
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
   [{:key     :notification
@@ -21,9 +18,9 @@
     :type :number}
    (preview/customization-color-option)])
 
-(defn preview
+(defn view
   []
-  (let [state (reagent/atom {:noticication-count  0
+  (let [state (reagent/atom {:notification-count  0
                              :customization-color :blue})]
     (fn []
       (let [blur?               (:blur? @state)
@@ -32,43 +29,25 @@
             notification        (:notification @state)
             notification-count  (:notification-count @state)]
         [preview/preview-container
-         {:state      state
-          :descriptor descriptor}
-         [rn/view {:padding-bottom 150}
-          [rn/view
-           {:padding-vertical   60
-            :padding-horizontal 20
-            :flex-direction     :row
-            :align-items        :center}
-           (when blur?
-             [rn/image
-              {:source (resources/get-mock-image (quo.theme/theme-value :light-blur-background
-                                                                        :dark-blur-background))
-               :style  {:position :absolute
-                        :top      0
-                        :left     0
-                        :right    0
-                        :bottom   0}}])
-           (when jump-to?
-             [rn/image
-              {:background-color colors/neutral-100
-               :style            {:position :absolute
-                                  :top      0
-                                  :left     0
-                                  :right    0
-                                  :bottom   0}}])
-           [quo/top-nav
-            {:container-style          {:flex 1 :z-index 2}
-             :max-unread-notifications 99
-             :blur?                    blur?
-             :notification             notification
-             :customization-color      customization-color
-             :notification-count       notification-count
-             :jump-to?                 jump-to?
-             :avatar-props             {:online?   true
-                                        :full-name "Test User"}
-             :avatar-on-press          #(js/alert "avatar pressed")
-             :scan-on-press            #(js/alert "scan pressed")
-             :activity-center-on-press #(js/alert "activity-center pressed")
-             :qr-code-on-press         #(js/alert "qr pressed")}]]]]))))
+         {:state                     state
+          :descriptor                descriptor
+          :blur?                     (and blur? (not jump-to?))
+          :show-blur-background?     (and blur? (not jump-to?))
+          :component-container-style {:padding-vertical   60
+                                      :padding-horizontal 20
+                                      :background-color   (when jump-to? colors/neutral-100)}}
+         [quo/top-nav
+          {:container-style          {:flex 1 :z-index 2}
+           :max-unread-notifications 99
+           :blur?                    blur?
+           :notification             notification
+           :customization-color      customization-color
+           :notification-count       notification-count
+           :jump-to?                 jump-to?
+           :avatar-props             {:online?   true
+                                      :full-name "Test User"}
+           :avatar-on-press          #(js/alert "avatar pressed")
+           :scan-on-press            #(js/alert "scan pressed")
+           :activity-center-on-press #(js/alert "activity-center pressed")
+           :qr-code-on-press         #(js/alert "qr pressed")}]]))))
 

src/status_im2/contexts/quo_preview/notifications/notification.cljs

@@ -76,7 +76,7 @@
     :duration 3000
     :type     :notification}])
 
-(defn preview-notification
+(defn view
   []
   (fn []
     [preview/preview-container

src/status_im2/contexts/quo_preview/notifications/toast.cljs

@@ -86,22 +86,17 @@
                  :duration   3000}])}
             "update above toast"]])))))
 
-(defn preview-toasts
+(defn view
   []
-  (fn []
-    [preview/preview-container
-     [rn/view
-      {:background-color "#508485"
-       :flex-direction   :column
-       :justify-content  :flex-start
-       :height           300}]
-     [into
-      [rn/view
-       {:flex    1
-        :padding 16}]
-      [^{:key :basic} [toast-button-basic]
-       ^{:key :with-undo-action} [toast-button-with-undo-action]
-       ^{:key :with-multiline} [toast-button-multiline]
-       ^{:key :30s-duration} [toast-button-30s-duration]
-       ^{:key :upsert}
-       [update-toast-button]]]]))
+  [preview/preview-container
+   {:component-container-style
+    {:flex-direction  :column
+     :justify-content :flex-start}}
+   [into
+    [rn/view {:style {:flex 1 :padding 16}}
+     [toast-button-basic]
+     [toast-button-with-undo-action]
+     [toast-button-multiline]
+     [toast-button-30s-duration]
+     [update-toast-button]
+     [update-toast-button]]]])

src/status_im2/contexts/quo_preview/tags/context_tags.cljs

@@ -1,5 +1,6 @@
 (ns status-im2.contexts.quo-preview.tags.context-tags
   (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
@@ -69,8 +70,9 @@
       :type    :select
       :options (map (fn [idx]
                       {:key   (mapv (fn [picture idx-name]
-                                      {:profile-picture picture
-                                       :full-name       (str (inc idx-name))})
+                                      {:profile-picture     picture
+                                       :full-name           (str (inc idx-name))
+                                       :customization-color (rand-nth (keys colors/customization))})
                                     (take idx (cycle users))
                                     (range))
                        :value (str idx)})
@@ -175,12 +177,15 @@
           :customization-color :army
           :profile-picture     nil
           :full-name           "Full Name"
-          :users               [{:profile-picture (resources/mock-images :user-picture-male5)
-                                 :full-name       "1"}
-                                {:profile-picture nil
-                                 :full-name       "3"}
-                                {:profile-picture (resources/mock-images :user-picture-male5)
-                                 :full-name       "2"}]
+          :users               [{:profile-picture     (resources/mock-images :user-picture-male5)
+                                 :full-name           "1"
+                                 :customization-color (rand-nth (keys colors/customization))}
+                                {:profile-picture     nil
+                                 :full-name           "3"
+                                 :customization-color (rand-nth (keys colors/customization))}
+                                {:profile-picture     (resources/mock-images :user-picture-male5)
+                                 :full-name           "2"
+                                 :customization-color (rand-nth (keys colors/customization))}]
           :group-name          "Group"
           :community-logo      (resources/mock-images :coinbase)
           :community-name      "Community"
@@ -200,31 +205,34 @@
           :address             example-pk
           :icon                :i/placeholder
           :context             "Context"
-          :duration            "00:32"})]
-    (fn []
-      [preview/preview-container
-       {:state      state
-        :descriptor (concat descriptor
-                            (case (:type @state)
-                              :default      default-descriptor
-                              :multiuser    multiuser-descriptor
-                              :group        group-descriptor
-                              :channel      channel-descriptor
-                              :community    community-descriptor
-                              :token        token-descriptor
-                              :network      network-descriptor
-                              :multinetwork multinetwork-descriptor
-                              :account      account-descriptor
-                              :collectible  collectible-descriptor
-                              :address      address-descriptor
-                              :icon         icon-descriptor
-                              :audio        audio-descriptor
-                              default-descriptor))}
-       [rn/view {:style {:padding-bottom 150}}
-        [rn/view {:style {:padding-vertical 60}}
-         [preview/blur-view
-          {:style                 {:flex              1
-                                   :margin-vertical   20
-                                   :margin-horizontal 40}
-           :show-blur-background? (:blur? @state)}
-          [quo/context-tag @state]]]]])))
+          :duration            "00:32"})
+        type (reagent/cursor state [:type])]
+    [:f>
+     (fn []
+       (rn/use-effect (fn []
+                        (when (#{:multiuser :multinetwork :audio} @type)
+                          (swap! state assoc :size 24)))
+                      [@type])
+       [preview/preview-container
+        {:state                 state
+         :descriptor            (concat descriptor
+                                        (case (:type @state)
+                                          :default      default-descriptor
+                                          :multiuser    multiuser-descriptor
+                                          :group        group-descriptor
+                                          :channel      channel-descriptor
+                                          :community    community-descriptor
+                                          :token        token-descriptor
+                                          :network      network-descriptor
+                                          :multinetwork multinetwork-descriptor
+                                          :account      account-descriptor
+                                          :collectible  collectible-descriptor
+                                          :address      address-descriptor
+                                          :icon         icon-descriptor
+                                          :audio        audio-descriptor
+                                          default-descriptor))
+         :blur-height           80
+         :blur?                 true
+         :show-blur-background? (:blur? @state)}
+        [rn/view {:style {:align-items :center}}
+         [quo/context-tag @state]]])]))

src/status_im2/contexts/quo_preview/tags/number_tag.cljs

@@ -13,15 +13,15 @@
     :type :text}
    {:key     :size
     :type    :select
-    :options [{:key   :size/s-32
+    :options [{:key   :size-32
                :value "32"}
-              {:key   :size/s-24
+              {:key   :size-24
                :value "24"}
-              {:key   :size/s-20
+              {:key   :size-20
                :value "20"}
-              {:key   :size/s-16
+              {:key   :size-16
                :value "16"}
-              {:key   :size/s-14
+              {:key   :size-14
                :value "14"}]}
    {:key  :blur?
     :type :boolean}])
@@ -30,7 +30,7 @@
   []
   (let [state (reagent/atom {:type   :squared
                              :number "148"
-                             :size   :size/s-32
+                             :size   :size-32
                              :blur?  false})]
     (fn []
       [preview/preview-container {:state state :descriptor descriptor}