Replace status-im.ui.components.react in status-im2

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 -->

Makefile

@@ -360,6 +360,7 @@ component-test-watch: export TARGET := clojure
 component-test-watch: export COMPONENT_TEST := true
 component-test-watch: export BABEL_ENV := test
 component-test-watch: ##@ Watch tests and re-run no changes to cljs files
+	rm -rf ./component-spec
 	yarn install
 	nodemon --exec 'yarn shadow-cljs compile component-test && jest --config=test/jest/jest.config.js' -e cljs
 
@@ -367,6 +368,7 @@ component-test: export TARGET := clojure
 component-test: export COMPONENT_TEST := true
 component-test: export BABEL_ENV := test
 component-test: ##@test Run component tests once in NodeJS
+	rm -rf ./component-spec
 	yarn install
 	yarn shadow-cljs compile component-test && \
 	jest --config=test/jest/jest.config.js

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/style.cljs

@@ -3,15 +3,12 @@
 
 (defn container
   [{:keys [container-size customization-color theme]}]
-  (let [color (if (keyword? customization-color)
-                customization-color
-                :blue)]
-    {:width            container-size
-     :height           container-size
-     :align-items      :center
-     :justify-content  :center
-     :border-radius    (/ container-size 2)
-     :overflow         :hidden
-     :background-color (colors/theme-colors (colors/custom-color color 50)
-                                            (colors/custom-color color 60)
-                                            theme)}))
+  {:width            container-size
+   :height           container-size
+   :align-items      :center
+   :justify-content  :center
+   :border-radius    (/ container-size 2)
+   :overflow         :hidden
+   :background-color (colors/theme-colors (colors/custom-color customization-color 50)
+                                          (colors/custom-color customization-color 60)
+                                          theme)})

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/code/code/style.cljs

@@ -1,87 +0,0 @@
-(ns quo2.components.code.code.style
-  (:require [quo2.foundations.colors :as colors]))
-
-;; Example themes:
-;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
-(defn theme
-  [theme-key]
-  (case theme-key
-    :hljs-comment (colors/theme-colors colors/neutral-40 colors/neutral-60)
-    :hljs-title   (colors/custom-color-by-theme :sky 50 60)
-    :hljs-keyword (colors/custom-color-by-theme :green 50 60)
-    :hljs-string  (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-literal (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-number  (colors/custom-color-by-theme :turquoise 50 60)
-    :line-number  colors/neutral-40
-    nil))
-
-(defn text-style
-  [class-names]
-  (let [text-color (->> class-names
-                        (map keyword)
-                        (some (fn [class-name]
-                                (when-let [text-color (theme class-name)]
-                                  text-color))))]
-    (cond-> {:flex-shrink 1
-             :line-height 18}
-      text-color (assoc :color text-color))))
-
-(defn border-color
-  []
-  (colors/theme-colors colors/neutral-20 colors/neutral-80))
-
-(defn container
-  []
-  {:overflow         :hidden
-   :padding          8
-   :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40)
-   :border-color     (border-color)
-   :border-width     1
-   :border-radius    16})
-
-(def gradient-container
-  {:position :absolute
-   :bottom   0
-   :left     0
-   :right    0
-   :z-index  1})
-
-(def gradient {:height 48})
-
-(defn line-number-container
-  [line-number-width]
-  {:position         :absolute
-   :bottom           0
-   :top              0
-   :left             0
-   :width            (+ line-number-width 8 7)
-   :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80)})
-
-(defn divider
-  [line-number-width]
-  {:position         :absolute
-   :bottom           0
-   :top              0
-   :left             (+ line-number-width 7 7)
-   :width            1
-   :z-index          2
-   :background-color (border-color)})
-
-(def line {:flex-direction :row})
-
-(defn line-number
-  [width]
-  {:margin-right 20 ; 8+12 margin
-   :width        width})
-
-(def copy-button
-  {:position :absolute
-   :bottom   8
-   :right    8
-   :z-index  1})
-
-(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
-
-(defn button-background-color
-  []
-  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))

src/quo2/components/code/common/style.cljs

@@ -0,0 +1,107 @@
+(ns quo2.components.code.common.style
+  (:require [quo2.foundations.colors :as colors]))
+
+;; Example themes:
+;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
+(defn highlight-theme
+  [theme-key]
+  (case theme-key
+    :hljs-comment      (colors/theme-colors colors/neutral-40 colors/neutral-60)
+    :hljs-title        (colors/custom-color-by-theme :sky 50 60)
+    :hljs-keyword      (colors/custom-color-by-theme :green 50 60)
+    :hljs-string       (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-literal      (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-number       (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-symbol       (colors/custom-color-by-theme :orange 50 50)
+    :hljs-builtin-name (colors/custom-color-by-theme :pink 50 50)
+    :line-number       colors/neutral-40
+    nil))
+
+(defn text-style
+  [class-names preview?]
+  (let [text-color (->> class-names
+                        (map keyword)
+                        (some (fn [class-name]
+                                (when-let [text-color (highlight-theme class-name)]
+                                  text-color))))]
+    (cond-> {:flex-shrink 1
+             :line-height 18}
+      preview?   (assoc :color colors/white)
+      text-color (assoc :color text-color))))
+
+(defn border-color
+  []
+  (colors/theme-colors colors/neutral-20 colors/neutral-80))
+
+(defn container
+  [preview? theme]
+  (if preview?
+    {:overflow         :hidden
+     :width            108
+     :background-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+     :border-radius    8}
+    {:overflow         :hidden
+     :padding          8
+     :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme)
+     :border-color     (border-color)
+     :border-width     1
+     :border-radius    16}))
+
+(def gradient-container
+  {:position :absolute
+   :bottom   0
+   :left     0
+   :right    0
+   :z-index  1})
+
+(def gradient {:height 48})
+
+(defn line-number-container
+  [line-number-width preview? theme]
+  (cond-> {:position         :absolute
+           :bottom           0
+           :top              0
+           :left             0
+           :width            (+ line-number-width 8 7)
+           :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)}
+    preview? (assoc :width            20
+                    :background-color (colors/theme-colors colors/neutral-10 colors/neutral-70 theme))))
+
+(defn divider
+  [line-number-width]
+  {:position         :absolute
+   :bottom           0
+   :top              0
+   :left             (+ line-number-width 7 7)
+   :width            1
+   :z-index          2
+   :background-color (border-color)})
+
+(def line {:flex-direction :row})
+
+(defn line-number
+  [width preview?]
+  (if preview?
+    {:width            width
+     :padding-vertical 3
+     :padding-left     8
+     :padding-right    4}
+    {:margin-right 20 ; 8+12 margin
+     :width        width}))
+
+(def line-content
+  {:flex               1
+   :padding-horizontal 8
+   :padding-vertical   3})
+
+(def copy-button
+  {:position :absolute
+   :bottom   8
+   :right    8
+   :z-index  1})
+
+(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
+
+(defn button-background-color
+  []
+  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))

src/quo2/components/code/common/view.cljs

@@ -1,8 +1,8 @@
-(ns quo2.components.code.snippet
+(ns quo2.components.code.common.view
   (:require [cljs-bean.core :as bean]
             [clojure.string :as string]
             [quo2.components.buttons.button.view :as button]
-            [quo2.components.code.code.style :as style]
+            [quo2.components.code.common.style :as style]
             [quo2.components.markdown.text :as text]
             [react-native.core :as rn]
             [react-native.linear-gradient :as linear-gradient]
@@ -10,39 +10,41 @@
             [reagent.core :as reagent]))
 
 (defn- render-nodes
-  [nodes]
+  [nodes preview?]
   (map (fn [{:keys [children value last-line?] :as node}]
          (if children
            (into [text/text
                   (cond-> {:weight :code
                            :size   :paragraph-2
-                           :style  (style/text-style (get-in node [:properties :className]))}
+                           :style  (style/text-style (get-in node [:properties :className]) preview?)}
                     last-line? (assoc :number-of-lines 1))]
-                 (render-nodes children))
+                 (render-nodes children preview?))
            ;; Remove newlines as we already render each line separately.
            (string/trim-newline value)))
        nodes))
 
 (defn- line
-  [{:keys [line-number line-number-width]} children]
+  [{:keys [line-number line-number-width preview?]} children]
   [rn/view {:style style/line}
-   [rn/view {:style (style/line-number line-number-width)}
+   [rn/view {:style (style/line-number line-number-width preview?)}
     [text/text
-     {:style  (style/text-style ["line-number"])
+     {:style  (style/text-style ["line-number"] preview?)
       :weight :code
       :size   :paragraph-2}
      line-number]]
-   children])
+   (cond->> children
+     preview? (conj [rn/view {:style style/line-content}]))])
 
 (defn- code-block
-  [{:keys [rows line-number-width]}]
+  [{:keys [rows line-number-width preview?]}]
   [rn/view
-   (->> rows
-        (render-nodes)
+   (->> preview?
+        (render-nodes rows)
         (map-indexed (fn [idx row-content]
                        [line
                         {:line-number       (inc idx)
-                         :line-number-width line-number-width}
+                         :line-number-width line-number-width
+                         :preview?          preview?}
                         row-content]))
         (into [:<>]))])
 
@@ -66,36 +68,44 @@
       (* 9 max-line-digits font-scale))))
 
 (defn- f-native-renderer
-  [{:keys [rows max-lines on-copy-press]
+  [{:keys [rows max-lines on-copy-press preview? theme]
     :or   {max-lines ##Inf}}]
   (let [font-scale          (:font-scale (rn/get-window))
         total-rows          (count rows)
-        number-rows-to-show (min (count rows) max-lines)
-        line-number-width   (calc-line-number-width font-scale number-rows-to-show)
+        number-rows-to-show (if preview?
+                              0
+                              (min (count rows) max-lines))
+        line-number-width   (if preview? 20 (calc-line-number-width font-scale number-rows-to-show))
         truncated?          (< number-rows-to-show total-rows)
         rows-to-show-coll   (if truncated?
                               (as-> rows $
                                 (update $ number-rows-to-show assoc :last-line? true)
                                 (take (inc number-rows-to-show) $))
                               rows)]
-    [rn/view {:style (style/container)}
-     [rn/view {:style (style/line-number-container line-number-width)}]
-     [rn/view {:style (style/divider line-number-width)}]
-     [mask-view {:apply-mask? truncated?}
-      [code-block
-       {:rows              rows-to-show-coll
-        :line-number-width line-number-width}]]
-     [rn/view {:style style/copy-button}
-      [button/button
-       {:icon-only? true
-        :type       :grey
-        :background :blur
-        :size       24
-        :on-press   on-copy-press}
-       :main-icons/copy]]]))
+    [rn/view {:style (style/container preview? theme)}
+     [rn/view {:style (style/line-number-container line-number-width preview? theme)}]
+     (if preview?
+       [code-block
+        {:rows              rows-to-show-coll
+         :line-number-width line-number-width
+         :preview?          preview?}]
+       [:<>
+        [rn/view {:style (style/divider line-number-width)}]
+        [mask-view {:apply-mask? truncated?}
+         [code-block
+          {:rows              rows-to-show-coll
+           :line-number-width line-number-width}]]
+        [rn/view {:style style/copy-button}
+         [button/button
+          {:icon-only? true
+           :type       :grey
+           :background :blur
+           :size       24
+           :on-press   on-copy-press}
+          :main-icons/copy]]])]))
 
-(defn snippet
-  [{:keys [language max-lines on-copy-press]} children]
+(defn view
+  [{:keys [language max-lines on-copy-press preview? theme]} children]
   [highlighter/highlighter
    {:language          language
     :renderer          (fn [^js/Object props]
@@ -103,8 +113,11 @@
                           [:f> f-native-renderer
                            {:rows          (-> props .-rows bean/->clj)
                             :on-copy-press #(when on-copy-press (on-copy-press children))
-                            :max-lines     max-lines}]))
+                            :max-lines     max-lines
+                            :preview?      preview?
+                            :theme         theme}]))
     :show-line-numbers false
     :style             {}
     :custom-style      {:background-color nil}}
    children])
+

src/quo2/components/code/snippet/view.cljs

@@ -0,0 +1,15 @@
+(ns quo2.components.code.snippet.view
+  (:require [quo2.theme :as theme]
+            [quo2.components.code.common.view :as code-common]))
+
+(defn- view-internal
+  [_]
+  (fn [{:keys [language max-lines on-copy-press]} children]
+    [code-common/view
+     {:language      language
+      :max-lines     max-lines
+      :on-copy-press on-copy-press
+      :preview?      false}
+     children]))
+
+(def view (theme/with-theme view-internal))

src/quo2/components/code/snippet_preview/view.cljs

@@ -0,0 +1,11 @@
+(ns quo2.components.code.snippet-preview.view
+  (:require [quo2.components.code.common.view :as code-common]))
+
+(defn view
+  [{:keys [language]} children]
+  [code-common/view
+   {:preview?  true
+    :language  language
+    :max-lines 0
+    :theme     :dark}
+   children])

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/activity_log/style.cljs

@@ -26,11 +26,15 @@
   {:color colors/white})
 
 (defn message-container
-  [attachment]
+  [attachment text-with-photos?]
   {:border-radius      12
    :margin-top         10
    :padding-horizontal 12
-   :padding-vertical   (if (#{:photo :gif} attachment) 12 8)
+   :padding-vertical   (if (and
+                            (not text-with-photos?)
+                            (#{:photo :gif} attachment))
+                         12
+                         8)
    :background-color   colors/white-opa-5})
 
 (def footer-container

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

@@ -73,24 +73,33 @@
                  detail]]))
            context))))
 
+(defn- hiccup-props
+  [body]
+  (and (vector? body)
+       (map? (second body))
+       (second body)))
+
 (defn- activity-message
   [{:keys [title body title-number-of-lines body-number-of-lines attachment]}]
-  [rn/view {:style (style/message-container attachment)}
-   (when title
-     [text/text
-      {:size                :paragraph-2
-       :accessibility-label :activity-message-title
-       :style               style/message-title
-       :number-of-lines     title-number-of-lines}
-      title])
-   (if (string? body)
-     [text/text
-      {:style               style/message-body
-       :accessibility-label :activity-message-body
-       :size                :paragraph-1
-       :number-of-lines     body-number-of-lines}
-      body]
-     body)])
+  (let [{:keys [photos message-text]} (hiccup-props body)
+        text-with-photos?             (and (not (string/blank? message-text))
+                                           (seq photos))]
+    [rn/view {:style (style/message-container attachment text-with-photos?)}
+     (when title
+       [text/text
+        {:size                :paragraph-2
+         :accessibility-label :activity-message-title
+         :style               style/message-title
+         :number-of-lines     title-number-of-lines}
+        title])
+     (if (string? body)
+       [text/text
+        {:style               style/message-body
+         :accessibility-label :activity-message-body
+         :size                :paragraph-1
+         :number-of-lines     body-number-of-lines}
+        body]
+       body)]))
 
 (defn- activity-title
   [title replying?]

src/quo2/components/notifications/activity_logs_photos/style.cljs

@@ -1,5 +1,7 @@
 (ns quo2.components.notifications.activity-logs-photos.style)
 
+(def text {:margin-bottom 8})
+
 (def photos-container
   {:flex           1
    :height         40

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

@@ -1,14 +1,25 @@
 (ns quo2.components.notifications.activity-logs-photos.view
   (:require [react-native.core :as rn]
-            [quo2.components.notifications.activity-logs-photos.style :as style]))
+            [quo2.components.markdown.text :as text]
+            [quo2.components.notifications.activity-logs-photos.style :as style]
+            [clojure.string :as string]))
 
 (defn view
-  [{:keys [photos]}]
-  [rn/view {:style style/photos-container}
-   (map-indexed
-    (fn [index photo]
-      ^{:key index}
-      [rn/image
-       {:source photo
-        :style  (style/photo index)}])
-    photos)])
+  [{:keys [photos message-text]}]
+  [:<>
+   (when (not (string/blank? message-text))
+     [text/text
+      {:size                :paragraph-1
+       :weight              :regular
+       :style               style/text
+       :number-of-lines     2
+       :accessibility-label :activity-log-title}
+      message-text])
+   [rn/view {:style style/photos-container}
+    (map-indexed
+     (fn [index photo]
+       ^{:key index}
+       [rn/image
+        {:source photo
+         :style  (style/photo index)}])
+     photos)]])

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

@@ -19,7 +19,8 @@
     quo2.components.calendar.calendar.view
     quo2.components.calendar.calendar-day.view
     quo2.components.calendar.calendar-year.view
-    quo2.components.code.snippet
+    quo2.components.code.snippet.view
+    quo2.components.code.snippet-preview.view
     quo2.components.colors.color-picker.view
     quo2.components.common.notification-dot.view
     quo2.components.common.separator.view
@@ -77,6 +78,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
@@ -164,7 +166,8 @@
 (def calendar-year quo2.components.calendar.calendar-year.view/view)
 
 ;;;; Code
-(def snippet quo2.components.code.snippet/snippet)
+(def snippet quo2.components.code.snippet.view/view)
+(def snippet-preview quo2.components.code.snippet-preview.view/view)
 
 ;;;; Cards
 (def small-option-card quo2.components.onboarding.small-option-card.view/small-option-card)
@@ -262,6 +265,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/activities.cljs

@@ -61,7 +61,8 @@
                         :chatId                    :chat-id
                         :contactVerificationStatus :contact-verification-status
                         :communityId               :community-id
-                        :membershipStatus          :membership-status})
+                        :membershipStatus          :membership-status
+                        :albumMessages             :album-messages})
       (update :last-message #(when % (messages/<-rpc %)))
       (update :message #(when % (messages/<-rpc %)))
       (update :reply-message #(when % (messages/<-rpc %)))

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/group_chats/core.cljs

@@ -20,10 +20,11 @@
 
 (rf/defn handle-chat-removed
   {:events [:chat-removed]}
-  [cofx response]
+  [cofx response chat-id]
   (rf/merge cofx
             {:db         (dissoc (:db cofx) :current-chat-id)
-             :dispatch-n [[:sanitize-messages-and-process-response response]
+             :dispatch-n [[:shell/close-switcher-card chat-id]
+                          [:sanitize-messages-and-process-response response]
                           [:pop-to-root :shell-stack]]}
             (activity-center/notifications-fetch-unread-count)))
 
@@ -117,7 +118,7 @@
   {:json-rpc/call [{:method      "wakuext_leaveGroupChat"
                     :params      [nil chat-id true]
                     :js-response true
-                    :on-success  #(re-frame/dispatch [:chat-removed %])}]})
+                    :on-success  #(re-frame/dispatch [:chat-removed % chat-id])}]})
 
 (rf/defn remove
   "Remove chat"

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

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.chat.messages.drawers.view
   (:require [quo2.core :as quo]
             [react-native.core :as rn]
-            [status-im.ui.components.react :as react]
             [status-im2.contexts.chat.composer.reply.view :as reply]
             [status-im2.constants :as constants]
             [utils.i18n :as i18n]
@@ -10,7 +9,8 @@
             [status-im2.common.contact-list-item.view :as contact-list-item]
             [status-im2.contexts.chat.messages.drawers.style :as style]
             [react-native.gesture :as gesture]
-            [quo2.components.reactions.resource :as reactions.resource]))
+            [quo2.components.reactions.resource :as reactions.resource]
+            [react-native.clipboard :as clipboard]))
 
 (defn contact-list-item-fn
   [{:keys [from compressed-key]}]
@@ -118,7 +118,7 @@
    (when (and (not (or deleted? deleted-for-me?))
               (not= content-type constants/content-type-audio))
      [{:type     :main
-       :on-press #(react/copy-to-clipboard
+       :on-press #(clipboard/set-string
                    (reply/get-quoted-text-with-mentions
                     (get content :parsed-text)))
        :label    (i18n/label :t/copy-text)

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))]])))