e2e: fixing tests: navigation

---------

Co-authored-by: Yevheniia Berdnyk <ie.berdnyk@gmail.com>
Co-authored-by: Churikova Tetiana <tatiana@status.im>

doc/decisions/0014-wallet-team.md

@@ -27,3 +27,4 @@ The team members for the initial wallet team are:
 - @ulisesmac
 - @erikseppanen
 - @mmilad75
+- @tumanov-alex

src/quo2/components/buttons/wallet_ctas/style.cljs

@@ -4,7 +4,10 @@
   {:padding-top        24
    :padding-bottom     12
    :padding-horizontal 20
-   :flex-direction     :row})
+   :flex-direction     :row
+   :justify-content    :center
+   :flex               1
+   :max-height         106})
 
 (def button-container
   {:padding-vertical 8

src/quo2/components/dividers/divider_label.cljs

@@ -1,90 +0,0 @@
-(ns quo2.components.dividers.divider-label
-  (:require [quo2.components.icon :as icons]
-            [quo2.components.markdown.text :as markdown.text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
-            [react-native.core :as rn]))
-
-(def chevron-icon-container-width 20)
-
-(def chevron-icon-container-height 20)
-
-(defn themed-view
-  "label -> string
-   chevron-position -> :left, :right
-   chevron-icon -> keyword
-   on-press -> function
-   padding-bottom -> number
-   counter-value -> number
-   increase-padding-top? -> boolean
-   blur? -> boolean
-   theme -> theme value passed from with-theme HOC"
-  [{:keys [label
-           chevron-position
-           chevron-icon
-           counter-value
-           increase-padding-top?
-           padding-bottom
-           blur?
-           container-style
-           on-press
-           theme]}]
-  (let [dark?                       (= :dark theme)
-        border-and-counter-bg-color (if dark?
-                                      (if blur? colors/white-opa-5 colors/neutral-70)
-                                      colors/neutral-10)
-        padding-top                 (if increase-padding-top? 16 8)
-        text-and-icon-color         (if dark? colors/neutral-40 colors/neutral-50)
-        counter-text-color          (if dark? colors/white colors/neutral-100)]
-    [rn/touchable-without-feedback {:on-press on-press}
-     [rn/view
-      {:accessible          true
-       :accessibility-label :divider-label
-       :style               (merge {:border-top-width 1
-                                    :border-top-color border-and-counter-bg-color
-                                    :padding-top      padding-top
-                                    :padding-bottom   padding-bottom
-                                    :padding-left     16
-                                    :padding-right    16
-                                    :align-items      :center
-                                    :flex-direction   :row}
-                                   container-style)}
-      (when (= chevron-position :left)
-        [rn/view
-         {:test-ID :divider-label-icon-left
-          :style   {:margin-right 4}}
-         [icons/icon
-          (or chevron-icon :i/chevron-down)
-          {:color  text-and-icon-color
-           :width  chevron-icon-container-width
-           :height chevron-icon-container-height}]])
-      [markdown.text/text
-       {:size   :paragraph-2
-        :weight :medium
-        :style  {:color text-and-icon-color
-                 :flex  1}}
-       label]
-      (when (= chevron-position :right)
-        [rn/view {:test-ID :divider-label-icon-right}
-         [icons/icon
-          (or chevron-icon :i/chevron-down)
-          {:color text-and-icon-color
-           :size  chevron-icon-container-width}]])
-      (when (pos? counter-value)
-        [rn/view
-         {:style {:border-radius    6
-                  :height           16
-                  :width            (case (count counter-value)
-                                      1 16
-                                      2 20
-                                      28)
-                  :background-color border-and-counter-bg-color
-                  :align-items      :center
-                  :justify-content  :center}}
-         [markdown.text/text
-          {:size   :label
-           :weight :medium
-           :style  {:color counter-text-color}}
-          counter-value]])]]))
-
-(def divider-label (theme/with-theme themed-view))

src/quo2/components/dividers/divider_label/component_spec.cljs

@@ -0,0 +1,20 @@
+(ns quo2.components.dividers.divider-label.component-spec
+  (:require [quo2.components.dividers.divider-label.view :as divider-label]
+            [test-helpers.component :as h]))
+
+(h/describe "Divider Label"
+  (h/test "default render"
+    (h/render [divider-label/view "Welcome"])
+    (h/is-truthy (h/query-by-label-text :divider-label)))
+  (h/test "with label"
+    (h/render [divider-label/view {:tight? true} "Welcome"])
+    (h/is-truthy (h/query-by-text "Welcome")))
+  (h/test "with label & counter value"
+    (h/render [divider-label/view {:tight? true :counter? true :counter-value 5} "Public"])
+    (h/is-truthy (h/query-by-text "Public"))
+    (h/is-truthy (h/query-by-text "5")))
+  (h/test "on-press event"
+    (let [on-press (h/mock-fn)]
+      (h/render [divider-label/view {:tight? false :on-press on-press} "General"])
+      (h/fire-event :press (h/query-by-label-text :divider-label))
+      (h/was-called on-press))))

src/quo2/components/dividers/divider_label/style.cljs

@@ -0,0 +1,39 @@
+(ns quo2.components.dividers.divider-label.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn- get-border-color
+  [blur? theme]
+  (colors/theme-colors (if blur? colors/neutral-80-opa-5 colors/neutral-10)
+                       (if blur? colors/white-opa-5 colors/neutral-90)
+                       theme))
+
+(defn get-content-color
+  [blur? theme]
+  (colors/theme-colors (if blur? colors/neutral-80-opa-70 colors/neutral-50)
+                       (if blur? colors/white-opa-70 colors/neutral-40)
+                       theme))
+
+(defn container
+  [blur? tight? chevron theme]
+  {:border-top-width 1
+   :border-top-color (get-border-color blur? theme)
+   :padding-top      (if tight? 6 14)
+   :padding-bottom   7
+   :padding-left     (if (= :left chevron) 16 20)
+   :padding-right    20
+   :align-items      :center
+   :flex-direction   :row})
+
+(defn content
+  [chevron]
+  {:flex-direction (if (= chevron :right)
+                     :row-reverse
+                     :row)
+   :align-items    :center
+   :height         20
+   :flex           1})
+
+(defn text
+  [blur? theme]
+  {:color (get-content-color blur? theme)
+   :flex  1})

src/quo2/components/dividers/divider_label/view.cljs

@@ -0,0 +1,60 @@
+(ns quo2.components.dividers.divider-label.view
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.components.dividers.divider-label.style :as style]
+            [quo2.theme :as quo.theme]
+            [react-native.core :as rn]
+            [quo2.components.counter.counter.view :as counter]
+            [quo2.components.icon :as icons]))
+
+(defn- view-internal
+  "Options:
+  - `counter?` (default: nil) - Display a counter on the right side of the divider.
+  - `counter-value` (default: nil) - Number to display if counter? is true.
+  - `chevron` nil/:right/:left (default: nil) - Display a chevron on the left or right side of the divider.
+  - `chevron-icon` (default: :i/chevron-right) - Icon to display when chevron is :left/:right.
+  - `tight?` (default: true) - Use a tighter padding.
+  - `blur?` (default: nil) - Use a blur background.
+  - `theme` - Theme value from with-theme HOC.
+  - `on-press` - Function called when the divider is pressed.
+  - `container-style` - Style applied to the container view.
+
+  label - String or markdown text component to display in the divider label."
+  [{:keys [counter?
+           counter-value
+           chevron
+           chevron-icon
+           tight?
+           blur?
+           theme
+           on-press
+           container-style]
+    :or   {tight? true}}
+   label]
+  [rn/pressable
+   {:on-press            on-press
+    :accessibility-label :divider-label
+    :style               (merge (style/container blur? tight? chevron theme)
+                                container-style)}
+   [rn/view
+    {:style (style/content chevron)}
+    (when chevron
+      [icons/icon (or chevron-icon :i/chevron-right)
+       {:color           (style/get-content-color blur? theme)
+        :container-style {(if (= chevron :right)
+                            :margin-left
+                            :margin-right)
+                          2}}])
+    [text/text
+     {:size   :paragraph-2
+      :weight :medium
+      :style  (style/text blur? theme)}
+     label]]
+   (when counter?
+     [counter/view
+      {:type            (if blur? :secondary :grey)
+       :container-style {:margin-left 2}}
+      counter-value])])
+
+(defn view
+  ([_ _] (quo.theme/with-theme view-internal))
+  ([label] [view {} label]))

src/quo2/components/dividers/divider_label_component_spec.cljs

@@ -1,45 +0,0 @@
-(ns quo2.components.dividers.divider-label-component-spec
-  (:require ["@testing-library/react-native" :as rtl]
-            [quo2.components.dividers.divider-label :as divider-label]
-            [reagent.core :as reagent]))
-
-(defn render-divider-label
-  ([]
-   (render-divider-label {}))
-  ([opts]
-   (rtl/render (reagent/as-element [divider-label/divider-label opts]))))
-
-(js/global.test "default render of divider-label component"
-  (fn []
-    (render-divider-label)
-    (-> (js/expect (rtl/screen.getByLabelText "divider-label"))
-        (.toBeTruthy))))
-
-(js/global.test "render divider-label component with a label"
-  (fn []
-    (render-divider-label {:label :hello})
-    (-> (js/expect (rtl/screen.getByText "hello"))
-        (.toBeTruthy))))
-
-(js/global.test "render divider-label component with a counter-value"
-  (fn []
-    (render-divider-label {:label         :hello
-                           :counter-value "1"})
-    (-> (js/expect (rtl/screen.getByText "1"))
-        (.toBeTruthy))))
-
-(js/global.test "divider-label chevron icon renders to the left when set"
-  (fn []
-    (render-divider-label {:label            :hello
-                           :counter-value    "1"
-                           :chevron-position :left})
-    (-> (js/expect (rtl/screen.getByTestId "divider-label-icon-left"))
-        (.toBeTruthy))))
-
-(js/global.test "divider-label chevron icon renders to the right when set"
-  (fn []
-    (render-divider-label {:label            :hello
-                           :counter-value    "1"
-                           :chevron-position :right})
-    (-> (js/expect (rtl/screen.getByTestId "divider-label-icon-right"))
-        (.toBeTruthy))))

src/quo2/components/empty_state/empty_state/styles.cljs

@@ -24,3 +24,8 @@
     {:color colors/white}))
 
 (def button-container {:margin-top 20})
+
+(def image-placeholder
+  {:width            80
+   :height           80
+   :background-color colors/danger})

src/quo2/components/empty_state/empty_state/view.cljs

@@ -7,14 +7,16 @@
             [quo2.theme :as theme]))
 
 (defn- empty-state-internal
-  [{:keys        [customization-color image title description blur?]
+  [{:keys        [customization-color image title description blur? placeholder? container-style]
     upper-button :upper-button
     lower-button :lower-button
     :or          {customization-color :blue}}]
-  [rn/view {:style styles/container}
-   [fast-image/fast-image
-    {:style  styles/image
-     :source image}]
+  [rn/view {:style (merge styles/container container-style)}
+   (if placeholder?
+     [rn/view {:style styles/image-placeholder}]
+     [fast-image/fast-image
+      {:style  styles/image
+       :source image}])
    [rn/view {:style styles/text-container}
     [text/text
      {:style           (styles/title blur?)

src/quo2/components/graph/wallet_graph/style.cljs

@@ -2,8 +2,11 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (def gradient-background
-  {:height          294
-   :justify-content :flex-end})
+  {:height   294
+   :position :absolute
+   :left     0
+   :right    0
+   :bottom   0})
 
 (def x-axis-label-text-style ; We need this to remove unnecessary bottom spacing from graph
   {:margin-bottom -3

src/quo2/components/graph/wallet_graph/view.cljs

@@ -37,11 +37,12 @@
         :style               style/illustration}
        [text/text {:style {:color colors/white}}
         "Illustration here"]]
-      [linear-gradient/linear-gradient
-       {:colors gradient-colors
-        :start  {:x 0 :y 1}
-        :end    {:x 0 :y 0}
-        :style  style/gradient-background}
+      [rn/view
+       [linear-gradient/linear-gradient
+        {:colors gradient-colors
+         :start  {:x 0 :y 1}
+         :end    {:x 0 :y 0}
+         :style  style/gradient-background}]
        [rn/view {:accessibility-label :line-chart}
         [charts/line-chart
          {:height                  96

src/quo2/components/list_items/dapp/component_spec.cljs

@@ -0,0 +1,24 @@
+(ns quo2.components.list-items.dapp.component-spec
+  (:require [quo2.components.list-items.dapp.view :as dapp]
+            [test-helpers.component :as h]))
+
+(def props
+  {:dapp                {:avatar nil
+                         :name   "Coingecko"
+                         :value  "coingecko.com"}
+   :state               :default
+   :action              :icon
+   :blur?               false
+   :customization-color :blue})
+
+(h/describe
+  "dApp component test"
+  (h/test "default render"
+    (h/render [dapp/view props])
+    (h/is-truthy (h/get-by-text (:name (:dapp props))))
+    (h/is-truthy (h/get-by-text (:value (:dapp props)))))
+  (h/test "on-press event"
+    (let [mock-fn (h/mock-fn)]
+      (h/render [dapp/view (assoc props :on-press-icon mock-fn)])
+      (h/fire-event :press (h/get-by-test-id "dapp-component-icon"))
+      (h/was-called mock-fn))))

src/quo2/components/list_items/dapp/style.cljs

@@ -0,0 +1,47 @@
+(ns quo2.components.list-items.dapp.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn get-background-color
+  [{:keys [pressed? state blur? customization-color theme]}]
+  (cond
+    (and pressed? (= theme :dark) blur?)          colors/white-opa-5
+
+    pressed?                                      (colors/theme-colors
+                                                   (colors/custom-color customization-color 50 5)
+                                                   (colors/custom-color customization-color 60 5)
+                                                   theme)
+
+    (and (= state :active) (= theme :dark) blur?) colors/white-opa-10
+
+    (= state :active)                             (colors/theme-colors
+                                                   (colors/custom-color customization-color 50 10)
+                                                   (colors/custom-color customization-color 60 10)
+                                                   theme)
+
+    :else                                         :transparent))
+
+(defn container
+  [props]
+  {:flex               1
+   :padding-horizontal 12
+   :padding-vertical   8
+   :border-radius      12
+   :background-color   (get-background-color props)
+   :flex-direction     :row
+   :justify-content    :space-between
+   :align-items        :center})
+
+(def container-info
+  {:flex-direction :row
+   :align-items    :center})
+
+(def user-info
+  {:margin-left 8})
+
+(defn style-text-name
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})
+
+(defn style-text-value
+  [theme]
+  {:color (colors/theme-colors colors/neutral-50 colors/white theme)})

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

@@ -0,0 +1,47 @@
+(ns quo2.components.list-items.dapp.view
+  (:require [quo2.components.icon :as icons]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]
+            [quo2.components.list-items.dapp.style :as style]
+            [quo2.theme :as quo.theme]
+            [reagent.core :as reagent]))
+
+(defn- view-internal
+  []
+  (let [pressed? (reagent/atom false)]
+    (fn [{:keys [dapp action on-press on-press-icon theme] :as props}]
+      [rn/pressable
+       {:style        (style/container (assoc props :pressed? @pressed?))
+        :on-press     on-press
+        :on-press-in  #(reset! pressed? true)
+        :on-press-out #(reset! pressed? false)}
+       [rn/view {:style style/container-info}
+        [fast-image/fast-image
+         {:source (:avatar dapp)
+          :style  {:width 32 :height 32}}]
+        [rn/view {:style style/user-info}
+         [text/text
+          {:weight :semi-bold
+           :size   :paragraph-1
+           :style  (style/style-text-name theme)}
+          (:name dapp)]
+         [text/text
+          {:weight :regular
+           :size   :paragraph-2
+           :style  (style/style-text-value theme)}
+          (:value dapp)]]]
+       (when (= action :icon)
+         [rn/pressable
+          {:on-press on-press-icon
+           :testID   "dapp-component-icon"}
+          [icons/icon :i/options
+           {:color               (colors/theme-colors
+                                  colors/neutral-50
+                                  colors/neutral-40
+                                  theme)
+            :accessibility-label :icon}]])])))
+
+(def view
+  (quo.theme/with-theme view-internal))

src/quo2/components/messages/author/style.cljs

@@ -6,22 +6,26 @@
    :flex-direction :row
    :align-items    :center})
 
-(def middle-dot-nickname
-  {:color             colors/neutral-50
+(defn middle-dot-nickname
+  []
+  {:color             (colors/theme-colors colors/neutral-40 colors/neutral-50)
    :margin-horizontal 4})
 
-(def chat-key-text
-  {:color       colors/neutral-50
+(defn chat-key-text
+  []
+  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50)
    :margin-left 8})
 
-(def middle-dot-chat-key
-  {:color       colors/neutral-50
+(defn middle-dot-chat-key
+  []
+  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50)
    :margin-left 4})
 
 (def icon-container
   {:margin-left 4})
 
 (defn time-text
-  [ens?]
-  {:color       colors/neutral-50
-   :margin-left (if ens? 8 4)})
+  [verified?]
+  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50)
+   :padding-top 1
+   :margin-left (if verified? 8 4)})

src/quo2/components/messages/author/view.cljs

@@ -9,26 +9,33 @@
 (def middle-dot "·")
 
 (defn author
-  [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?]}]
+  [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?
+           muted? size]
+    :or   {size 13}}]
   [rn/view {:style (merge style/container style)}
    [text/text
-    {:weight          :semi-bold
-     :size            :paragraph-2
-     :number-of-lines 1
-     :style           {:color (colors/theme-colors colors/neutral-100 colors/white)}}
+    {:weight              :semi-bold
+     :size                (if (= size 15) :paragraph-1 :paragraph-2)
+     :number-of-lines     1
+     :accessibility-label :author-primary-name
+     :style               {:color (if muted?
+                                    colors/neutral-50
+                                    (colors/theme-colors colors/neutral-100 colors/white))}}
     primary-name]
    (when (not (string/blank? secondary-name))
      [:<>
       [text/text
-       {:size            :paragraph-2
+       {:size            :label
         :number-of-lines 1
-        :style           style/middle-dot-nickname}
+        :style           (style/middle-dot-nickname)}
        middle-dot]
       [text/text
-       {:weight          :medium
-        :size            :paragraph-2
-        :number-of-lines 1
-        :style           {:color (colors/theme-colors colors/neutral-60 colors/neutral-40)}}
+       {:weight              :medium
+        :size                :label
+        :number-of-lines     1
+        :accessibility-label :author-secondary-name
+        :style               {:padding-top 1
+                              :color       (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
        secondary-name]])
    (when contact?
      [icons/icon :main-icons2/contact
@@ -51,14 +58,14 @@
       {:monospace       true
        :size            :label
        :number-of-lines 1
-       :style           style/chat-key-text}
+       :style           (style/chat-key-text)}
       short-chat-key])
-   (when (and (not verified?) time-str)
+   (when (and (not verified?) time-str short-chat-key)
      [text/text
       {:monospace       true
        :size            :label
        :number-of-lines 1
-       :style           style/middle-dot-chat-key}
+       :style           (style/middle-dot-chat-key)}
       middle-dot])
    (when time-str
      [text/text

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

@@ -47,7 +47,7 @@
 
 (defn- user-account
   [{:keys [state name balance percentage-value loading? amount customization-color type emoji metrics?
-           theme]}]
+           theme on-press]}]
   (let [watch-only?        (= :watch-only type)
         empty?             (= :empty type)
         account-amount     (if (= :empty state) "€0.00" amount)
@@ -59,44 +59,45 @@
         :type                type
         :theme               theme
         :metrics?            metrics?}]
-      [:<>
-       [rn/view {:style (style/card customization-color watch-only? metrics? theme)}
-        [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}
+      [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
-           {: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?)
-             [:<>
-              [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 {:margin-left 4}}
-               [icon/icon :positive
-                {:color (if (and watch-only? (not (colors/dark?)))
-                          colors/neutral-50
-                          colors/white-opa-70)
-                 :size  16}]]])])]])))
+           {:weight              :semi-bold
+            :size                :paragraph-2
+            :accessibility-label :metrics
+            :style               (style/metrics watch-only? theme)}
+           account-percentage]
+          (when (not empty?)
+            [:<>
+             [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 {: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}]]])])])))
 
 (defn- add-account-view
   [{:keys [on-press customization-color theme metrics?]}]

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

@@ -5,7 +5,7 @@
   {:padding-top        24
    :padding-horizontal 20
    :padding-bottom     20
-   :height             78
+   :height             130
    :align-items        :center
    :justify-content    :center})
 

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

@@ -9,7 +9,9 @@
 
 (defn- loading-state
   [color]
-  [:<>
+  [rn/view
+   {:style {:height      130
+            :align-items :center}}
    [rn/view
     (style/loading-bar-margin-bottom {:color         color
                                       :width         104
@@ -99,7 +101,9 @@
      {:style style/account-overview-wrapper}
      (if (= :loading state)
        [loading-state (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)]
-       [:<>
+       [rn/view
+        {:style {:height      130
+                 :align-items :center}}
         [account-details account-name account theme]
         [text/text
          {:weight :semi-bold

src/quo2/core.cljs

@@ -33,7 +33,7 @@
     quo2.components.counter.counter.view
     quo2.components.counter.step.view
     quo2.components.dividers.date
-    quo2.components.dividers.divider-label
+    quo2.components.dividers.divider-label.view
     quo2.components.dividers.new-messages
     quo2.components.dividers.strength-divider.view
     quo2.components.drawers.action-drawers.view
@@ -62,6 +62,7 @@
     quo2.components.list-items.account-list-card.view
     quo2.components.list-items.channel
     quo2.components.list-items.community.view
+    quo2.components.list-items.dapp.view
     quo2.components.list-items.menu-item
     quo2.components.list-items.preview-list
     quo2.components.list-items.token-value.view
@@ -110,8 +111,8 @@
     quo2.components.tags.tags
     quo2.components.tags.token-tag
     quo2.components.text-combinations.title.view
-    quo2.components.wallet.account-overview.view
     quo2.components.wallet.account-card.view
+    quo2.components.wallet.account-overview.view
     quo2.components.wallet.keypair.view
     quo2.components.wallet.network-amount.view
     quo2.components.wallet.network-bridge.view
@@ -181,7 +182,7 @@
 (def step quo2.components.counter.step.view/view)
 
 ;;;; Dividers
-(def divider-label quo2.components.dividers.divider-label/divider-label)
+(def divider-label quo2.components.dividers.divider-label.view/view)
 (def new-messages quo2.components.dividers.new-messages/new-messages)
 (def divider-date quo2.components.dividers.date/date)
 (def strength-divider quo2.components.dividers.strength-divider.view/view)
@@ -235,6 +236,7 @@
 ;;;; List items
 (def account-list-card quo2.components.list-items.account-list-card.view/view)
 (def channel-list-item quo2.components.list-items.channel/list-item)
+(def dapp quo2.components.list-items.dapp.view/view)
 (def menu-item quo2.components.list-items.menu-item/menu-item)
 (def preview-list quo2.components.list-items.preview-list/preview-list)
 (def user-list quo2.components.list-items.user-list/user-list)

src/quo2/core_spec.cljs

@@ -17,7 +17,7 @@
     [quo2.components.colors.color-picker.component-spec]
     [quo2.components.counter.counter.component-spec]
     [quo2.components.counter.step.component-spec]
-    [quo2.components.dividers.divider-label-component-spec]
+    [quo2.components.dividers.divider-label.component-spec]
     [quo2.components.dividers.strength-divider.component-spec]
     [quo2.components.drawers.action-drawers.component-spec]
     [quo2.components.drawers.documentation-drawers.component-spec]
@@ -36,6 +36,7 @@
     [quo2.components.links.url-preview-list.component-spec]
     [quo2.components.links.url-preview.component-spec]
     [quo2.components.list-items.community.component-spec]
+    [quo2.components.list-items.dapp.component-spec]
     [quo2.components.list-items.token-value.component-spec]
     [quo2.components.markdown.text-component-spec]
     [quo2.components.markdown.list.component-spec]
@@ -55,8 +56,8 @@
     [quo2.components.settings.category.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
     [quo2.components.tags.status-tags-component-spec]
-    [quo2.components.wallet.account-overview.component-spec]
     [quo2.components.wallet.account-card.component-spec]
+    [quo2.components.wallet.account-overview.component-spec]
     [quo2.components.wallet.keypair.component-spec]
     [quo2.components.wallet.network-amount.component-spec]
     [quo2.components.wallet.network-bridge.component-spec]

src/status_im2/common/contact_list/view.cljs

@@ -3,4 +3,4 @@
 
 (defn contacts-section-header
   [{:keys [title]}]
-  [quo/divider-label {:label title}])
+  [quo/divider-label title])

src/status_im2/common/home/banner/style.cljs

@@ -17,6 +17,10 @@
   [scroll-shared-value]
   (reanimated/interpolate scroll-shared-value [0 max-scroll] [0 (- max-scroll)] :clamp))
 
+(defn- animated-card-translation-y-reverse
+  [scroll-shared-value]
+  (reanimated/interpolate scroll-shared-value [0 max-scroll] [0 (+ max-scroll)] :clamp))
+
 (defn banner-card-blur-layer
   [scroll-shared-value]
   (reanimated/apply-animations-to-style
@@ -30,13 +34,15 @@
     :height   (+ (safe-area/get-top) 244)}))
 
 (defn banner-card-hiding-layer
-  []
-  {:z-index     2
-   :position    :absolute
-   :top         0
-   :right       0
-   :left        0
-   :padding-top (safe-area/get-top)})
+  [scroll-shared-value]
+  (reanimated/apply-animations-to-style
+   {:transform [{:translate-y (animated-card-translation-y-reverse scroll-shared-value)}]}
+   {:z-index     2
+    :position    :absolute
+    :top         0
+    :right       0
+    :left        0
+    :padding-top (safe-area/get-top)}))
 
 (def animated-banner-card-container {:overflow :hidden})
 

src/status_im2/common/home/banner/view.cljs

@@ -24,7 +24,7 @@
     (oops/ocall! scroll-ref "scrollToOffset" #js {:offset 0})))
 
 (defn- banner-card-blur-layer
-  [scroll-shared-value]
+  [scroll-shared-value child]
   (let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq)]
     [reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value)}
      [blur/view
@@ -33,12 +33,13 @@
        :blur-type     (theme/theme-value (if platform/ios? :light :xlight) :dark)
        :overlay-color (if open-sheet?
                         (colors/theme-colors colors/white colors/neutral-95-opa-70)
-                        (theme/theme-value nil colors/neutral-95-opa-70))}]]))
+                        (theme/theme-value nil colors/neutral-95-opa-70))}
+      child]]))
 
 (defn- banner-card-hiding-layer
   [{:keys [title-props card-props scroll-shared-value]}]
   (let [customization-color (rf/sub [:profile/customization-color])]
-    [rn/view {:style (style/banner-card-hiding-layer)}
+    [reanimated/view {:style (style/banner-card-hiding-layer scroll-shared-value)}
      [common.home/top-nav {:type :grey}]
      [common.home/title-column (assoc title-props :customization-color customization-color)]
      [rn/view {:style style/animated-banner-card-container}
@@ -65,8 +66,8 @@
 (defn animated-banner
   [{:keys [scroll-ref tabs selected-tab on-tab-change scroll-shared-value content customization-color]}]
   [:<>
-   [:f> banner-card-blur-layer scroll-shared-value]
-   [:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)]
+   [:f> banner-card-blur-layer scroll-shared-value
+    [:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)]]
    [:f> banner-card-tabs-layer
     {:scroll-shared-value scroll-shared-value
      :selected-tab        selected-tab

src/status_im2/common/resources.cljs

@@ -52,6 +52,7 @@
 (def mock-images
   {:diamond              (js/require "../resources/images/mock2/diamond.png")
    :coinbase             (js/require "../resources/images/mock2/coinbase.png")
+   :coin-gecko           (js/require "../resources/images/mock2/coin-gecko.png")
    :collectible          (js/require "../resources/images/mock2/collectible.png")
    :contact              (js/require "../resources/images/mock2/contact.png")
    :community-banner     (js/require "../resources/images/mock2/community-banner.png")

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

@@ -3,22 +3,13 @@
 
 (defn container
   []
-  {:margin-top         8
-   :margin-horizontal  8
+  {:margin-horizontal  8
    :padding-vertical   8
    :padding-horizontal 12
    :border-radius      12
    :flex-direction     :row
    :align-items        :center})
 
-(defn timestamp
-  [muted?]
-  {:color       (if muted?
-                  colors/neutral-50
-                  (colors/theme-colors colors/neutral-50 colors/neutral-40))
-   :margin-top  3
-   :margin-left 8})
-
 (def chat-data-container
   {:flex         1
    :margin-left  8

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

@@ -167,36 +167,6 @@
       :accessibility-label :chat-message-text}
      preview-text]))
 
-
-(defn verified-or-contact-icon
-  [{:keys [ens-verified added?]}]
-  (if ens-verified
-    [rn/view {:style {:margin-left 5 :margin-top 4}}
-     [quo/icon :i/verified
-      {:no-color true
-       :size     12
-       :color    (colors/theme-colors colors/success-50 colors/success-60)}]]
-    (when added?
-      [rn/view {:style {:margin-left 5 :margin-top 4}}
-       [quo/icon :i/contact
-        {:no-color true
-         :size     12
-         :color    (colors/theme-colors colors/primary-50 colors/primary-60)}]])))
-
-(defn name-view
-  [display-name contact timestamp muted?]
-  [rn/view {:style {:flex-direction :row}}
-   [quo/text
-    {:weight              :semi-bold
-     :accessibility-label :chat-name-text
-     :style               {:color (when muted? colors/neutral-50)}}
-    display-name]
-   [verified-or-contact-icon contact]
-   [quo/text
-    {:size  :label
-     :style (style/timestamp muted?)}
-    (datetime/to-short-str timestamp)]])
-
 (defn avatar-view
   [{:keys [contact chat-id full-name color muted?]}]
   (if contact ; `contact` is passed when it's not a group chat
@@ -244,13 +214,14 @@
         unviewed-messages-count])]))
 
 (defn chat-list-item
-  [{:keys [chat-id group-chat color name timestamp last-message muted]
+  [{:keys [chat-id group-chat color name last-message timestamp muted]
     :as   item}]
-  (let [display-name (if group-chat
-                       name
-                       (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])))
-        contact      (when-not group-chat
-                       (rf/sub [:contacts/contact-by-address chat-id]))]
+  (let [[primary-name secondary-name]
+        (if group-chat
+          [name ""]
+          (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
+        {:keys [ens-verified added?] :as contact} (when-not group-chat
+                                                    (rf/sub [:contacts/contact-by-address chat-id]))]
     [rn/touchable-opacity
      {:style         (style/container)
       :on-press      (open-chat chat-id)
@@ -259,10 +230,17 @@
      [avatar-view
       {:contact   contact
        :chat-id   chat-id
-       :full-name display-name
+       :full-name primary-name
        :color     color
        :muted?    muted}]
      [rn/view {:style style/chat-data-container}
-      [name-view display-name contact timestamp muted]
+      [quo/author
+       {:primary-name   primary-name
+        :secondary-name secondary-name
+        :size           15
+        :verified?      ens-verified
+        :contact?       added?
+        :muted?         muted
+        :time-str       (datetime/to-short-str timestamp)}]
       [last-message-preview group-chat last-message muted]]
      [notification item]]))

src/status_im2/contexts/chat/photo_selector/album_selector/view.cljs

@@ -47,8 +47,8 @@
   [{:keys [title]}]
   (when-not (= title no-title)
     [quo/divider-label
-     {:label           title
-      :container-style style/divider}]))
+     {:container-style style/divider}
+     title]))
 
 (defn key-fn
   [item index]

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

@@ -83,14 +83,10 @@
         :on-layout #(on-category-layout name (int (layout-y %)))}
        (when-not (= constants/empty-category-id category-id)
          [quo/divider-label
-          {:container-style  {:padding-left   16
-                              :padding-right  20
-                              :padding-top    6 ; Because of border width of 1
-                              :padding-bottom 7}
-           :label            name
-           :on-press         #(collapse-category community-id category-id collapsed?)
-           :chevron-icon     (if collapsed? :i/chevron-right :i/chevron-down)
-           :chevron-position :left}])
+          {:on-press     #(collapse-category community-id category-id collapsed?)
+           :chevron-icon (if collapsed? :i/chevron-right :i/chevron-down)
+           :chevron      :left}
+          name])
        (when-not collapsed?
          (into [rn/view {:style {:padding-horizontal 8 :padding-bottom 8}}]
                (map #(channel-chat-item community-id community-color %))
@@ -296,8 +292,8 @@
         :blur-type     :transparent
         :overlay-color :transparent}
        [quo/divider-label
-        {:label            label
-         :chevron-position :left}]])))
+        {:chevron :left}
+        label]])))
 
 (defn page-nav-right-section-buttons
   [id]

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

@@ -1,20 +1,14 @@
 (ns status-im2.contexts.quo-preview.avatars.account-avatar
-  (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Type"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :default
-               :value "default"}
-              {:key   :watch-only
-               :value "watch only"}]}
-   {:label   "Size"
-    :key     :size
+    :options [{:key :default}
+              {:key :watch-only}]}
+   {:key     :size
     :type    :select
     :options [{:key   16
                :value "16"}
@@ -35,29 +29,12 @@
     :type  :text}
    (preview/customization-color-option)])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:customization-color :purple
                              :size                80
                              :emoji               "🍑"
                              :type                :default})]
     (fn []
-      [rn/view
-       {:style {:margin-bottom 50
-                :padding       16}}
-       [preview/customizer state descriptor]
-       [rn/view
-        {:style {:padding-vertical 60
-                 :align-items      :center}}
-        [account-avatar/view @state]]])))
-
-(defn preview-account-avatar
-  []
-  [rn/view
-   {:style {:flex             1
-            :background-color (colors/theme-colors colors/white colors/neutral-95)}}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/account-avatar @state]])))

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

@@ -1,34 +1,26 @@
 (ns status-im2.contexts.quo-preview.avatars.channel-avatar
   (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size:"
-    :key     :size
+  [{:key     :size
     :type    :select
     :options [{:key :size/l :value "Large"}
-              {:key :default :value "Default"}]}
-   {:label "Emoji:"
-    :key   :emoji
-    :type  :text}
-   {:label "Full name:"
-    :key   :full-name
-    :type  :text}
+              {:key :default}]}
+   {:key  :emoji
+    :type :text}
+   {:key  :full-name
+    :type :text}
    (preview/customization-color-option)
-   {:label   "Locked state:"
-    :key     :locked-state
+   {:key     :locked-state
     :type    :select
-    :options [{:key   :not-set
-               :value "Not set"}
-              {:key   :unlocked
-               :value "Unlocked"}
-              {:key   :locked
-               :value "Locked"}]}])
+    :options [{:key :not-set}
+              {:key :unlocked}
+              {:key :locked}]}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:size                :size/l
                              :locked-state        :not-set
@@ -42,26 +34,8 @@
                                   :unlocked false
                                   :locked   true
                                   nil)]
-        [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-         [rn/view {:style {:padding-bottom 150}}
-          [rn/view {:style {:flex 1}}
-           [preview/customizer state descriptor]]
-          [rn/view
-           {:style {:padding-vertical 60
-                    :flex-direction   :row
-                    :justify-content  :center}}
-           [quo/channel-avatar
-            (assoc @state
-                   :locked?             locked?
-                   :customization-color customization-color)]]]]))))
-
-(defn preview-channel-avatar
-  []
-  [rn/view
-   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
-            :flex             1}}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+        [preview/preview-container {:state state :descriptor descriptor}
+         [quo/channel-avatar
+          (assoc @state
+                 :locked?             locked?
+                 :customization-color customization-color)]]))))

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

@@ -1,14 +1,11 @@
 (ns status-im2.contexts.quo-preview.avatars.group-avatar
-  (:require [quo2.core :as quo2]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size"
-    :key     :size
+  [{:key     :size
     :type    :select
     :options [{:key   :size/s-20
                :value "20"}
@@ -20,40 +17,21 @@
                :value "48"}
               {:key   :size/s-80
                :value "80"}]}
-   {:label "Avatar"
+   {:label "Avatar:"
     :key   :picture?
     :type  :boolean}
    (preview/customization-color-option)])
 
 (def avatar (resources/get-mock-image :photo1))
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom {:theme               :light
-                             :customization-color :blue
+  (let [state (reagent/atom {:customization-color :blue
                              :size                :size/s-20
                              :picture?            false})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:style {:padding-bottom 150}}
-        [rn/view {:style {:flex 1}}
-         [preview/customizer state descriptor]]
-        [rn/view
-         {:style {:padding-vertical 60
-                  :flex-direction   :row
-                  :justify-content  :center}}
-         (let [{:keys [picture?]} @state
-               params             (if picture? (assoc @state :picture avatar) @state)]
-           [quo2/group-avatar params])]]])))
-
-(defn preview-group-avatar
-  []
-  [rn/view
-   {:style {:background-color (colors/theme-colors colors/white
-                                                   colors/neutral-90)
-            :flex             1}}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/group-avatar
+        (cond-> @state
+          (:picture? @state)
+          (assoc :picture avatar))]])))

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

@@ -1,59 +1,27 @@
 (ns status-im2.contexts.quo-preview.avatars.icon-avatar
-  (:require [quo2.components.avatars.icon-avatar :as quo2]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.components.avatars.icon-avatar :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size"
-    :key     :size
+  [{:key     :size
     :type    :select
-    :options [{:key   :small
-               :value "Small"}
-              {:key   :medium
-               :value "Medium"}
-              {:key   :big
-               :value "Big"}]}
-   {:label   "Icon"
-    :key     :icon
+    :options [{:key :small}
+              {:key :medium}
+              {:key :big}]}
+   {:key     :icon
     :type    :select
-    :options [{:key   :main-icons/placeholder20
+    :options [{:key   :i/placeholder20
                :value "Placeholder"}
-              {:key   :main-icons/wallet
-               :value "Wallet"}
-              {:key   :main-icons/play
-               :value "Play"}]}
-   {:label   "Color"
-    :key     :color
-    :type    :select
-    :options (map
-              (fn [c]
-                {:key   c
-                 :value c})
-              (keys colors/customization))}])
+              {:key :i/wallet}
+              {:key :i/play}]}
+   (preview/customization-color-option {:key :color})])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:size  :big
-                             :icon  :main-icons/placeholder20
+                             :icon  :i/placeholder20
                              :color :primary})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo2/icon-avatar @state]]]])))
-
-(defn preview-icon-avatar
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/icon-avatar @state]])))

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

@@ -1,48 +1,29 @@
 (ns status-im2.contexts.quo-preview.avatars.user-avatar
-  (:require [quo2.components.avatars.user-avatar.view :as quo2]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.components.avatars.user-avatar.view :as quo]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size:"
-    :key     :size
+  [{:key     :size
     :type    :select
-    :options [{:key   :big
-               :value "Big"}
-              {:key   :medium
-               :value "Medium"}
-              {:key   :small
-               :value "Small"}
-              {:key   :xs
-               :value "x Small"}
-              {:key   :xxs
-               :value "xx Small"}
-              {:key   :xxxs
-               :value "xxx Small"}]}
-   {:label   "Customization color:"
-    :key     :customization-color
-    :type    :select
-    :options (map (fn [[color-kw _]]
-                    {:key   color-kw
-                     :value (name color-kw)})
-                  colors/customization)}
-   {:label "Online status"
-    :key   :online?
-    :type  :boolean}
-   {:label "Status Indicator"
-    :key   :status-indicator?
-    :type  :boolean}
+    :options [{:key :big}
+              {:key :medium}
+              {:key :small}
+              {:key :xs}
+              {:key :xxs}
+              {:key :xxxs}]}
+   (preview/customization-color-option)
+   {:key  :online?
+    :type :boolean}
+   {:key  :status-indicator?
+    :type :boolean}
    {:label "Identicon Ring (applies only when there's no profile picture)"
     :key   :ring?
     :type  :boolean}
-   {:label "Full name separated by space"
-    :key   :full-name
-    :type  :text}
-   {:label   "Profile Picture"
-    :key     :profile-picture
+   {:key  :full-name
+    :type :text}
+   {:key     :profile-picture
     :type    :select
     :options [{:value "None"
                :key   nil}
@@ -51,7 +32,7 @@
               {:value "pedro.eth"
                :key   (resources/get-mock-image :user-picture-male4)}]}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:full-name           "A Y"
                              :status-indicator?   true
@@ -59,23 +40,5 @@
                              :size                :medium
                              :customization-color :blue})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [rn/view {:flex 1}
-         [preview/customizer state descriptor]]
-        [rn/view
-         {:padding-vertical 60
-          :flex-direction   :row
-          :justify-content  :center}
-         [quo2/user-avatar @state]]]])))
-
-(defn preview-user-avatar
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/user-avatar @state]])))

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

@@ -1,7 +1,5 @@
 (ns status-im2.contexts.quo-preview.avatars.wallet-user-avatar
-  (:require [quo2.components.avatars.wallet-user-avatar :as quo2]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.components.avatars.wallet-user-avatar :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
@@ -12,46 +10,21 @@
    {:label "Last name"
     :key   :l-name
     :type  :text}
-   {:label   "Size"
-    :key     :size
+   {:key     :size
     :type    :select
-    :options [{:key   :small
-               :value "Small"}
-              {:key   :medium
-               :value "Medium"}
-              {:key   :large
-               :value "Large"}
+    :options [{:key :small}
+              {:key :medium}
+              {:key :large}
               {:key   :x-large
                :value "X Large"}]}
-   {:label   "Color"
-    :key     :color
-    :type    :select
-    :options (map
-              (fn [c]
-                {:key   c
-                 :value c})
-              (keys colors/customization))}])
+   (preview/customization-color-option {:key :color})])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:first-name "empty"
                              :last-name  "name"
                              :size       :x-large
                              :color      :indigo})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view {:padding-vertical 60}
-         [quo2/wallet-user-avatar @state]]]])))
-
-(defn preview-wallet-user-avatar
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/wallet-user-avatar @state]])))

src/status_im2/contexts/quo_preview/banners/banner.cljs

@@ -1,46 +1,22 @@
 (ns status-im2.contexts.quo-preview.banners.banner
-  (:require [quo2.core :as quo2]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "message"
-    :key   :latest-pin-text
-    :type  :text}
-   {:label "number of messages"
-    :key   :pins-count
-    :type  :text}
-   {:label "hide pin icon?"
-    :key   :hide-pin?
-    :type  :boolean}
-  ])
+  [{:key  :latest-pin-text
+    :type :text}
+   {:key  :pins-count
+    :type :text}
+   {:key  :hide-pin?
+    :type :boolean}])
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom
-               {:hide-pin?       false
-                :pins-count      2
-                :latest-pin-text "Be respectful of fellow community members, even if they"})]
+  (let [state (reagent/atom {:hide-pin? false
+                             :pins-count 2
+                             :latest-pin-text
+                             "Be respectful of fellow community members, even if they"})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [rn/view {:flex 1}
-         [preview/customizer state descriptor]]
-        [rn/view
-         {:padding-vertical 60
-          :flex-direction   :row
-          :justify-content  :center}
-         [quo2/banner @state]]]])))
-
-(defn preview-banner
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/banner @state]])))

src/status_im2/contexts/quo_preview/bottom_sheet/bottom_sheet.cljs

@@ -1,64 +0,0 @@
-(ns status-im2.contexts.quo-preview.bottom-sheet.bottom-sheet
-  (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [re-frame.core :as re-frame]
-            [react-native.core :as rn]
-            [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
-
-(def descriptor
-  [{:label "Show handle:"
-    :key   :show-handle?
-    :type  :boolean}
-   {:label "Backdrop dismiss:"
-    :key   :backdrop-dismiss?
-    :type  :boolean}
-   {:label "Expendable:"
-    :key   :expandable?
-    :type  :boolean}
-   {:label "Disable drag:"
-    :key   :disable-drag?
-    :type  :boolean}])
-
-(defn bottom-sheet-content
-  []
-  [rn/view
-   {:style {:justify-content :center
-            :align-items     :center}}
-   [quo/button {:on-press #(do (re-frame/dispatch [:hide-bottom-sheet]))} "Close bottom sheet"]
-
-   [quo/text {:style {:padding-top 20}} "Hello world!"]])
-
-(defn cool-preview
-  []
-  (let [state                (reagent/atom {:show-handle?      true
-                                            :backdrop-dismiss? true
-                                            :expandable?       true
-                                            :disable-drag?     false})
-        on-bottom-sheet-open (fn []
-                               (re-frame/dispatch [:show-bottom-sheet
-                                                   (merge
-                                                    {:content bottom-sheet-content}
-                                                    @state)]))]
-    (fn []
-      [rn/view
-       {:style {:margin-bottom 50
-                :padding       16}}
-       [preview/customizer state descriptor]
-       [:<>
-        [rn/view
-         {:style {:align-items :center
-                  :padding     16}}
-
-         [quo/button {:on-press on-bottom-sheet-open} "Open bottom sheet"]]]])))
-
-(defn preview-bottom-sheet
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/buttons/button.cljs

@@ -1,33 +1,22 @@
 (ns status-im2.contexts.quo-preview.buttons.button
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]
-            [status-im2.common.resources :as resources]))
+            [status-im2.common.resources :as resources]
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Type:"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :primary
-               :value "Primary"}
-              {:key   :positive
-               :value "Positive"}
-              {:key   :grey
-               :value "Grey"}
-              {:key   :dark-grey
-               :value "Dark Grey"}
-              {:key   :outline
-               :value "Outline"}
-              {:key   :ghost
-               :value "Ghost"}
-              {:key   :danger
-               :value "Danger"}
-              {:key   :black
-               :value "Black"}]}
-   {:label   "Size:"
-    :key     :size
+    :options [{:key :primary}
+              {:key :positive}
+              {:key :grey}
+              {:key :dark-grey}
+              {:key :outline}
+              {:key :ghost}
+              {:key :danger}
+              {:key :black}]}
+   {:key     :size
     :type    :select
     :options [{:key   56
                :value "56"}
@@ -37,40 +26,25 @@
                :value "32"}
               {:key   24
                :value "24"}]}
-   {:label   "Background:"
-    :key     :background
+   {:key     :background
     :type    :select
-    :options [{:key   :blur
-               :value "Blur"}
-              {:key   :photo
-               :value "Photo"}]}
-   {:label "Icon Only?:"
-    :key   :icon-only?
-    :type  :boolean}
-   {:label "show icon-top "
-    :key   :icon-top
-    :type  :boolean}
-   {:label "show icon-right"
-    :key   :icon-right
-    :type  :boolean}
-   {:label "show icon-left"
-    :key   :icon-left
-    :type  :boolean}
-   {:label "Disabled?:"
-    :key   :disabled?
-    :type  :boolean}
-   {:label "Label"
-    :key   :label
-    :type  :text}
-   {:label   "Customization color:"
-    :key     :customization-color
-    :type    :select
-    :options (map (fn [color]
-                    (let [k (get color :name)]
-                      {:key k :value k}))
-                  (quo/picker-colors))}])
+    :options [{:key :blur}
+              {:key :photo}]}
+   {:key  :icon-only?
+    :type :boolean}
+   {:key  :icon-top
+    :type :boolean}
+   {:key  :icon-right
+    :type :boolean}
+   {:key  :icon-left
+    :type :boolean}
+   {:key  :disabled?
+    :type :boolean}
+   {:key  :label
+    :type :text}
+   (preview/customization-color-option)])
 
-(defn cool-preview
+(defn view
   []
   (let [state      (reagent/atom {:label               "Press Me"
                                   :size                40
@@ -82,46 +56,31 @@
         icon-top   (reagent/cursor state [:icon-top])
         icon-only? (reagent/cursor state [:icon-only?])]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [rn/view {:flex 1}
-         [preview/customizer state descriptor]]
-        [rn/view
-         {:padding-vertical 60
-          :flex-direction   :row
-          :justify-content  :center}
-         (when (= :photo (:background @state))
-           [rn/image
-            {:source (resources/get-mock-image :community-cover)
-             :style  {:position :absolute
-                      :top      0
-                      :left     0
-                      :right    0
-                      :bottom   0}}])
-         [quo/button
-          (merge (dissoc @state
-                  :theme
-                  :customization-color
-                  :icon-left
-                  :icon-right)
-                 {:background (:background @state)
-                  :on-press   #(println "Hello world!")}
-                 (when (= :primary (:type @state)) {:customization-color (:customization-color @state)})
-                 (when @icon-top
-                   {:icon-top :i/placeholder})
-                 (when @icon-left
-                   {:icon-left :i/placeholder})
-                 (when @icon-right
-                   {:icon-right :i/placeholder}))
-          (if @icon-only? :i/placeholder @label)]]]])))
-
-(defn preview-button
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-95)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:align-items :center}}
+       (when (= :photo (:background @state))
+         [rn/image
+          {:source (resources/get-mock-image :community-cover)
+           :style  {:position :absolute
+                    :top      0
+                    :left     0
+                    :right    0
+                    :bottom   0}}])
+       [quo/button
+        (merge (dissoc @state
+                :theme
+                :customization-color
+                :icon-left
+                :icon-right)
+               {:background (:background @state)
+                :on-press   #(println "Hello world!")}
+               (when (= :primary (:type @state)) {:customization-color (:customization-color @state)})
+               (when @icon-top
+                 {:icon-top :i/placeholder})
+               (when @icon-left
+                 {:icon-left :i/placeholder})
+               (when @icon-right
+                 {:icon-right :i/placeholder}))
+        (if @icon-only? :i/placeholder @label)]])))

src/status_im2/contexts/quo_preview/buttons/composer_button.cljs

@@ -1,49 +1,24 @@
 (ns status-im2.contexts.quo-preview.buttons.composer-button
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as quo2.theme]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]
-            [status-im2.common.resources :as resources]))
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Blur?:"
-    :key   :blur?
-    :type  :boolean}
-   {:label "Disabled?:"
-    :key   :disabled?
-    :type  :boolean}])
+  [{:key  :blur?
+    :type :boolean}
+   {:key  :disabled?
+    :type :boolean}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:icon          :i/placeholder
+                             :blur?         false
                              :on-press      #(js/alert "pressed")
                              :on-long-press #(js/alert "long pressed")})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:flex 1 :padding-bottom 20}
-        [rn/view {:height 200}
-         [preview/customizer state descriptor]]
-        [rn/view
-         {:flex            1
-          :align-items     :center
-          :justify-content :center}
-         (when (:blur? @state)
-           [rn/image
-            {:source (if (= :light (quo2.theme/get-theme))
-                       (resources/get-mock-image :community-cover)
-                       (resources/get-mock-image :dark-blur-bg))
-             :style  {:position :absolute
-                      :top      200
-                      :left     0
-                      :right    0
-                      :bottom   0}}])
-         [quo/composer-button @state]]]])))
-
-(defn preview-composer-button
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-95)
-    :flex             1}
-   [cool-preview]])
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true}
+       [quo/composer-button @state]])))

src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs

@@ -1,55 +1,31 @@
 (ns status-im2.contexts.quo-preview.buttons.dynamic-button
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
-            [utils.i18n :as i18n]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [utils.i18n :as i18n]))
 
 (def descriptor
-  [{:label   "Type:"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :jump-to
-               :value "Jump To"}
-              {:key   :mention
-               :value "Mention"}
-              {:key   :notification-down
-               :value "Notification Down"}
-              {:key   :notification-up
-               :value "Notification Up"}
-              {:key   :search
-               :value "Search"}
-              {:key   :search-with-label
-               :value "Search With Label"}
-              {:key   :scroll-to-bottom
-               :value "Bottom"}]}
-   {:label "Count"
-    :key   :count
-    :type  :text}])
+    :options [{:key :jump-to}
+              {:key :mention}
+              {:key :notification-down}
+              {:key :notification-up}
+              {:key :search}
+              {:key :search-with-label}
+              {:key :scroll-to-bottom}]}
+   {:key  :count
+    :type :text}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:count  "5"
                              :type   :jump-to
                              :labels {:jump-to           (i18n/label :t/jump-to)
                                       :search-with-label (i18n/label :t/back)}})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo/dynamic-button @state]]]])))
-
-(defn preview-dynamic-button
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:align-items :center}}
+       [quo/dynamic-button @state]])))

src/status_im2/contexts/quo_preview/buttons/predictive_keyboard.cljs

@@ -1,59 +1,34 @@
 (ns status-im2.contexts.quo-preview.buttons.predictive-keyboard
   (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [react-native.blur :as blur]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Type"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key :error :value "Error"}
-              {:key :empty :value "Empty"}
-              {:key :info :value "Info"}
-              {:key :words :value "Words"}]}
-   {:label "Text"
-    :key   :text
-    :type  :text}
-   {:label "Blur"
-    :key   :blur?
-    :type  :boolean}])
+    :options [{:key :error}
+              {:key :empty}
+              {:key :info}
+              {:key :words}]}
+   {:key  :text
+    :type :text}
+   {:key  :blur?
+    :type :boolean}])
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom {:type :info :text "Enter 12, 18 or 24 words separated by a space"})
+  (let [state (reagent/atom {:type :info
+                             :text "Enter 12, 18 or 24 words separated by a space"})
         blur? (reagent/cursor state [:blur?])]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view
-         (when @blur?
-           [blur/view
-            {:style         {:position         :absolute
-                             :left             0
-                             :right            0
-                             :top              0
-                             :bottom           0
-                             :background-color colors/neutral-80-opa-70}
-             :overlay-color :transparent}])
-         [rn/view {:padding-vertical 60 :align-items :center}
-          [quo/predictive-keyboard
-           (merge @state
-                  {:words    ["label" "label" "labor" "ladder" "lady" "lake"]
-                   :on-press #(js/alert (str "Pressed: " %))})]]]]])))
-
-(defn preview-predictive-keyboard
-  []
-  [rn/view
-   {:background-color (colors/theme-colors
-                       colors/white
-                       colors/neutral-95)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container
+       {:state                state
+        :descriptor           descriptor
+        :blur?                @blur?
+        :blur-container-style {:background-color colors/neutral-80-opa-70}
+        :blur-view-props      {:overlay-color :transparent}}
+       [quo/predictive-keyboard
+        (merge @state
+               {:words    ["label" "label" "labor" "ladder" "lady" "lake"]
+                :on-press #(js/alert (str "Pressed: " %))})]])))

src/status_im2/contexts/quo_preview/buttons/slide_button.cljs

@@ -1,30 +1,18 @@
 (ns status-im2.contexts.quo-preview.buttons.slide-button
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size:"
-    :key     :size
+  [{:key     :size
     :type    :select
-    :options [{:key   :large
-               :value "Large"}
-              {:key   :small
-               :value "Small"}]}
-   {:label "Disabled:"
-    :key   :disabled?
-    :type  :boolean}
-   {:label   "Custom Color"
-    :key     :color
-    :type    :select
-    :options (map (fn [color]
-                    (let [k (get color :name)]
-                      {:key k :value k}))
-                  (quo/picker-colors))}])
+    :options [{:key :large}
+              {:key :small}]}
+   {:key  :disabled?
+    :type :boolean}
+   (preview/customization-color-option {:key :color})])
 
-(defn cool-preview
+(defn view
   []
   (let [state     (reagent/atom {:disabled? false
                                  :color     :blue
@@ -34,34 +22,20 @@
         size      (reagent/cursor state [:size])
         complete? (reagent/atom false)]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view
-         {:padding-vertical   60
-          :padding-horizontal 40
-          :align-items        :center}
-         (if (not @complete?)
-           [quo/slide-button
-            {:track-text          "We gotta slide"
-             :track-icon          :face-id
-             :customization-color @color
-             :size                @size
-             :disabled?           @disabled?
-             :on-complete         (fn []
-                                    (js/setTimeout (fn [] (reset! complete? true))
-                                                   1000)
-                                    (js/alert "I don't wanna slide anymore"))}]
-           [quo/button {:on-press (fn [] (reset! complete? false))}
-            "Try again"])]]])))
-
-(defn preview-slide-button
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:align-items :center}}
+       (if (not @complete?)
+         [quo/slide-button
+          {:track-text          "We gotta slide"
+           :track-icon          :face-id
+           :customization-color @color
+           :size                @size
+           :disabled?           @disabled?
+           :on-complete         (fn []
+                                  (js/setTimeout (fn [] (reset! complete? true))
+                                                 1000)
+                                  (js/alert "I don't wanna slide anymore"))}]
+         [quo/button {:on-press (fn [] (reset! complete? false))}
+          "Try again"])])))

src/status_im2/contexts/quo_preview/buttons/wallet_button.cljs

@@ -1,35 +1,19 @@
 (ns status-im2.contexts.quo-preview.buttons.wallet-button
-  (:require
-    [quo2.core :as quo]
-    [quo2.foundations.colors :as colors]
-    [react-native.core :as rn]
-    [reagent.core :as reagent]
-    [status-im2.contexts.quo-preview.preview :as preview]))
+  (:require [quo2.core :as quo]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Disabled?:"
-    :key   :disabled?
-    :type  :boolean}])
+  [{:key :disabled? :type :boolean}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:icon          :i/placeholder
                              :on-press      #(js/alert "pressed")
                              :on-long-press #(js/alert "long pressed")})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:flex 1 :padding-bottom 20}
-        [rn/view {:height 200}
-         [preview/customizer state descriptor]]
-        [rn/view
-         {:flex            1
-          :align-items     :center
-          :justify-content :center}
-         [quo/wallet-button @state]]]])))
-
-(defn preview
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-95)
-    :flex             1}
-   [cool-preview]])
+      [preview/preview-container
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:align-items :center}}
+       [quo/wallet-button @state]])))

src/status_im2/contexts/quo_preview/buttons/wallet_ctas.cljs

@@ -1,30 +1,12 @@
 (ns status-im2.contexts.quo-preview.buttons.wallet-ctas
-  (:require
-    [quo2.core :as quo]
-    [react-native.core :as rn]
-    [reagent.core :as reagent]))
+  (:require [quo2.core :as quo]
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom {:buy-action     #(js/alert "Buy button pressed")
-                             :send-action    #(js/alert "Send button pressed")
-                             :receive-action #(js/alert "Receive button pressed")
-                             :bridge-action  #(js/alert "Bridge button pressed")})]
-    (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:style {:padding-bottom 150}}
-        [rn/view
-         {:style {:padding-vertical 60
-                  :flex-direction   :row
-                  :justify-content  :center}}
-         [quo/wallet-ctas @state]]]])))
-
-(defn preview
-  []
-  [rn/view
-   {:style {:flex 1}}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+  [preview/preview-container {}
+   [quo/wallet-ctas
+    {:buy-action     #(js/alert "Buy button pressed")
+     :send-action    #(js/alert "Send button pressed")
+     :receive-action #(js/alert "Receive button pressed")
+     :bridge-action  #(js/alert "Bridge button pressed")}]])

src/status_im2/contexts/quo_preview/calendar/calendar.cljs

@@ -1,42 +1,26 @@
 (ns status-im2.contexts.quo-preview.calendar.calendar
-  (:require [status-im2.contexts.quo-preview.preview :as preview]
-            [react-native.core :as rn]
-            [utils.datetime :as dt]
-            [quo2.foundations.colors :as colors]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
-            [quo2.core :as quo]))
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [utils.datetime :as datetime]))
 
 (def descriptor
-  [{:label "Start Date"
-    :key   :start-date
-    :type  :text}
-   {:label "End Date"
-    :key   :end-date
-    :type  :text}])
+  [{:key  :start-date
+    :type :text}
+   {:key  :end-date
+    :type :text}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:start-date nil :end-date nil})
         range (reagent/atom {:start-date nil :end-date nil})]
-    (fn
-      []
-      [rn/touchable-without-feedback
-       {:on-press rn/dismiss-keyboard!}
-       [rn/view {:style {:flex 1}}
-        [preview/customizer state descriptor]
-        [rn/view {:style {:padding 19 :flex-grow 2}}
-         [quo/calendar
-          {:start-date (:start-date @range)
-           :end-date   (:end-date @range)
-           :on-change  (fn [new-range]
-                         (reset! state
-                           {:start-date (dt/format-date (:start-date new-range))
-                            :end-date   (dt/format-date (:end-date new-range))})
-                         (reset! range new-range))}]]]])))
-
-(defn preview-calendar
-  []
-  [rn/view
-   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
-            :flex             1}}
-   [cool-preview]])
+    (fn []
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/calendar
+        {:start-date (:start-date @range)
+         :end-date   (:end-date @range)
+         :on-change  (fn [new-range]
+                       (reset! state
+                         {:start-date (datetime/format-date (:start-date new-range))
+                          :end-date   (datetime/format-date (:end-date new-range))})
+                       (reset! range new-range))}]])))

src/status_im2/contexts/quo_preview/calendar/calendar_day.cljs

@@ -1,45 +1,21 @@
 (ns status-im2.contexts.quo-preview.calendar.calendar-day
-  (:require [status-im2.contexts.quo-preview.preview :as preview]
-            [react-native.core :as rn]
-            [quo2.foundations.colors :as colors]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
-            [quo2.core :as quo]))
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "State:"
-    :key     :state
+  [(preview/customization-color-option)
+   {:key     :state
     :type    :select
-    :options [{:key   :default
-               :value "Default"}
-              {:key   :selected
-               :value "Selected"}
-              {:key   :disabled
-               :value "Disabled"}
-              {:key   :today
-               :value "Today"}]}])
+    :options [{:key :default}
+              {:key :selected}
+              {:key :disabled}
+              {:key :today}]}])
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom
-               {:state :default})]
-    (fn
-      []
-      [rn/touchable-without-feedback
-       {:on-press rn/dismiss-keyboard!}
-       [rn/view
-        [preview/customizer state descriptor]
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo/calendar-day (assoc @state :customization-color :blue) 12]]]])))
-
-(defn preview-calendar-day
-  []
-  [rn/view
-   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
-            :flex             1}}
-   [rn/flat-list
-    {:style                        {:flex 1}
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+  (let [state (reagent/atom {:state               :default
+                             :customization-color :blue})]
+    (fn []
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/calendar-day @state 12]])))

src/status_im2/contexts/quo_preview/calendar/calendar_year.cljs

@@ -1,39 +1,16 @@
 (ns status-im2.contexts.quo-preview.calendar.calendar-year
-  (:require [status-im2.contexts.quo-preview.preview :as preview]
-            [react-native.core :as rn]
-            [quo2.foundations.colors :as colors]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
-            [quo2.core :as quo]))
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Selected?"
-    :key   :selected?
-    :type  :boolean}
-   {:label "Disabled?"
-    :key   :disabled?
-    :type  :boolean}])
+  [{:key :selected? :type :boolean}
+   {:key :disabled? :type :boolean}])
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom {:selected? false :disabled? false})]
-    (fn
-      []
-      [rn/touchable-without-feedback
-       {:on-press rn/dismiss-keyboard!}
-       [rn/view
-        [preview/customizer state descriptor]
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo/calendar-year @state "2023"]]]])))
-
-(defn preview-calendar-year
-  []
-  [rn/view
-   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
-            :flex             1}}
-   [rn/flat-list
-    {:style                        {:flex 1}
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+  (let [state (reagent/atom {:selected? false
+                             :disabled? false})]
+    (fn []
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/calendar-year @state "2023"]])))

src/status_im2/contexts/quo_preview/code/snippet.cljs

@@ -1,7 +1,5 @@
 (ns status-im2.contexts.quo-preview.code.snippet
-  (:require [quo2.components.code.snippet :as snippet]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
@@ -69,25 +67,21 @@
              :text     go-example}})
 
 (def descriptor
-  [{:label   "Language:"
-    :key     :language
+  [{:key     :language
     :type    :select
-    :options [{:key   :clojure
-               :value :clojure}
-              {:key   :go
-               :value :go}]}
-   {:label   "Max lines:"
-    :key     :max-lines
+    :options [{:key :clojure}
+              {:key :go}]}
+   {:key     :max-lines
     :type    :select
     :options (map (fn [n]
                     {:key   n
                      :value (str n " lines")})
                   (range 0 41 5))}
-   {:label "Syntax highlight:"
+   {:label "Syntax highlight?"
     :key   :syntax
     :type  :boolean}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:language  :clojure
                              :max-lines 40
@@ -99,25 +93,9 @@
                         (js/parseInt max-lines)
                         (when-not (js/Number.isNaN max-lines)
                           max-lines))]
-        [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-         [rn/view {:style {:padding-bottom 150}}
-          [preview/customizer state descriptor]
-          [rn/view
-           {:style {:padding-vertical   60
-                    :padding-horizontal 16}}
-           [snippet/snippet
-            {:language      language
-             :max-lines     max-lines
-             :on-copy-press #(js/alert %)}
-            text]]]]))))
-
-(defn preview-code-snippet
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+        [preview/preview-container {:state state :descriptor descriptor}
+         [quo/snippet
+          {:language      language
+           :max-lines     max-lines
+           :on-copy-press #(js/alert %)}
+          text]]))))

src/status_im2/contexts/quo_preview/community/channel_actions.cljs

@@ -1,27 +1,27 @@
 (ns status-im2.contexts.quo-preview.community.channel-actions
-  (:require [react-native.core :as rn]
-            [quo2.components.community.channel-actions :as channel-actions]))
+  (:require [quo2.core :as quo]
+            [react-native.core :as rn]))
 
-(defn preview-channel-actions
+(defn view
   []
   [rn/view {:flex 1}
    [rn/scroll-view {:style {:flex 1 :padding-horizontal 20}}
-    [channel-actions/channel-actions
+    [quo/channel-actions
      {:actions [{:big?          true
                  :label         "Pinned Messages"
                  :color         :blue
                  :icon          :i/pin
                  :counter-value 0}]}]
     [rn/view {:height 50}]
-    [channel-actions/channel-actions
+    [quo/channel-actions
      {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
                 {:label "Mute chat" :color :blue :icon :i/muted}]}]
     [rn/view {:height 50}]
-    [channel-actions/channel-actions
+    [quo/channel-actions
      {:actions [{:big? true :label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
                 {:label "Mute chat" :color :blue :icon :i/muted}]}]
     [rn/view {:height 50}]
-    [channel-actions/channel-actions
+    [quo/channel-actions
      {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
                 {:label "Mute chat" :color :blue :icon :i/muted}
                 {:label "Something else" :color :blue :icon :i/placeholder}]}]]])

src/status_im2/contexts/quo_preview/community/community_card_view.cljs

@@ -1,12 +1,10 @@
 (ns status-im2.contexts.quo-preview.community.community-card-view
   (:require [quo.design-system.colors :as quo.colors]
-            [quo2.components.community.community-card-view :as community-card-view]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+            [quo2.core :as quo]
             [reagent.core :as reagent]
-            [utils.i18n :as i18n]
             [status-im2.common.resources :as resources]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [utils.i18n :as i18n]))
 
 (def community-data
   {:id "id"
@@ -28,48 +26,22 @@
            :emoji     (resources/get-image :podcasts)}]})
 
 (def descriptor
-  [{:label   "Status:"
-    :key     :status
+  [{:key     :status
     :type    :select
-    :options [{:key   :gated
-               :value "Gated"}
-              {:key   :open
-               :value "Open"}]}
-   {:label "Locked?"
-    :key   :locked?
-    :type  :boolean}
-   {:label "Loading?"
-    :key   :loading?
-    :type  :boolean}])
+    :options [{:key :gated}
+              {:key :open}]}
+   {:key  :locked?
+    :type :boolean}
+   {:key  :loading?
+    :type :boolean}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:status   :gated
                              :locked?  true
                              :loading? false})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:flex    1
-          :padding 16}
-         [preview/customizer state descriptor]]
-        [rn/view
-         {:padding-vertical 60
-          :justify-content  :center}
-         [community-card-view/view
-          {:community (merge @state community-data)
-           :loading?  (:loading? @state)}]]]])))
-
-(defn preview-community-card
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/neutral-5
-                                           colors/neutral-95)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
-
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/community-card-view-item
+        {:community (merge @state community-data)
+         :loading?  (:loading? @state)}]])))

src/status_im2/contexts/quo_preview/community/community_membership_list_view.cljs

@@ -1,70 +1,37 @@
 (ns status-im2.contexts.quo-preview.community.community-membership-list-view
-  (:require [quo.previews.preview :as preview]
-            [quo.react-native :as rn]
-            [quo2.components.community.community-list-view :as community-list-view]
-            [quo2.foundations.colors :as colors]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.community.data :as data]))
+            [status-im2.contexts.quo-preview.community.data :as data]
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Notifications:"
-    :key     :notifications
+  [{:key     :notifications
     :type    :select
-    :options [{:key   :muted
-               :value "Muted"}
-              {:key   :unread-mentions-count
-               :value "Mention counts"}
-              {:key   :unread-messages-count
-               :value "Unread messages"}]}
-   {:label   "Status:"
-    :key     :status
+    :options [{:key :muted}
+              {:key :unread-mentions-count}
+              {:key :unread-messages-count}]}
+   {:key     :status
     :type    :select
-    :options [{:key   :gated
-               :value "Gated"}
-              {:key   :open
-               :value "Open"}]}
-   {:label "Locked:"
-    :key   :locked?
-    :type  :boolean}])
+    :options [{:key :gated}
+              {:key :open}]}
+   {:key  :locked?
+    :type :boolean}])
 
-(defn cool-preview
+(defn view
   []
-  (let [notifications (reagent/atom (:notifications nil))
-        state         (reagent/atom {:locked?       true
-                                     :notifications nil
-                                     :status        (if notifications
-                                                      :gated
-                                                      :open)})]
+  (let [state (reagent/atom {:locked?       true
+                             :notifications :muted
+                             :status        :gated})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:flex    1
-          :padding 16}
-         [preview/customizer state descriptor]]
-        [rn/view
-         {:padding-vertical 60
-          :justify-content  :center}
-         [community-list-view/communities-membership-list-item {}
-          false
-          (cond-> (merge @state data/community)
-            (= :muted (:notifications @state))
-            (assoc :muted? true)
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/communities-membership-list-item {}
+        false
+        (cond-> (merge @state data/community)
+          (= :muted (:notifications @state))
+          (assoc :muted? true)
 
-            (= :unread-mentions-count (:notifications @state))
-            (assoc :unread-mentions-count 5)
+          (= :unread-mentions-count (:notifications @state))
+          (assoc :unread-mentions-count 5)
 
-            (= :unread-messages-count (:notifications @state))
-            (assoc :unread-messages? true))]]]])))
-
-(defn preview-community-list-view
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/neutral-5
-                                           colors/neutral-95)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+          (= :unread-messages-count (:notifications @state))
+          (assoc :unread-messages? true))]])))

src/status_im2/contexts/quo_preview/community/discover_card.cljs

@@ -1,42 +1,17 @@
 (ns status-im2.contexts.quo-preview.community.discover-card
-  (:require [quo.previews.preview :as preview]
-            [quo.react-native :as rn]
-            [quo2.components.community.banner.view :as discover-card]
-            [quo2.foundations.colors :as colors]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
-            [utils.i18n :as i18n]))
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Joined:"
-    :key   :joined?
-    :type  :boolean}])
+  [{:key :title :type :text}
+   {:key :description :type :text}])
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom {:joined? :false})]
+  (let [state (reagent/atom {:title       "Discover"
+                             :description "Your favourite communities"
+                             :joined?     false})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:flex    1
-          :padding 16}
-         [preview/customizer state descriptor]]
-        [rn/view
-         {:padding-vertical 60
-          :justify-content  :center}
-         [discover-card/view
-          {:joined?     (:joined? @state)
-           :title       (i18n/label :t/discover)
-           :description (i18n/label :t/favorite-communities)}]]]])))
-
-(defn preview-discoverd-card
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/neutral-5
-                                           colors/neutral-95)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/discover-card @state]])))

src/status_im2/contexts/quo_preview/community/token_gating.cljs

@@ -1,27 +1,21 @@
 (ns status-im2.contexts.quo-preview.community.token-gating
-  (:require
-    [quo2.foundations.resources :as resources]
-    [reagent.core :as reagent]
-    [react-native.core :as rn]
-    [status-im2.contexts.quo-preview.preview :as preview]
-    [quo2.core :as quo]))
+  (:require [quo2.core :as quo]
+            [quo2.foundations.resources :as resources]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Tokens sufficient"
+  [{:label "Tokens sufficient?"
     :key   :sufficient?
     :type  :boolean}
-   {:label "Many tokens ?"
-    :key   :many-tokens?
-    :type  :boolean}
-   {:label "Loading ?"
-    :key   :loading?
-    :type  :boolean}
-   {:label "Сondition ?"
-    :key   :condition?
-    :type  :boolean}
-   {:label "Padding ?"
-    :key   :padding?
-    :type  :boolean}])
+   {:key  :many-tokens?
+    :type :boolean}
+   {:key  :loading?
+    :type :boolean}
+   {:key  :condition?
+    :type :boolean}
+   {:key  :padding?
+    :type :boolean}])
 
 (defn join-gate-options-base
   [sufficient? many-tokens? loading?]
@@ -75,17 +69,12 @@
                                 loading?)])
      :padding? padding?}))
 
-(def state
-  (reagent/atom {:sufficient?  false
-                 :many-tokens? false
-                 :condition?   false
-                 :padding?     false}))
-
-(defn preview-token-gating
+(defn view
   []
-  (let [preview-props (get-mocked-props @state)]
-    [rn/view {:flex 1}
-     [rn/scroll-view {:style {:flex 1}}
-      [preview/customizer state descriptor]]
-     [rn/view {:padding-horizontal 20 :padding-vertical 20}
-      [quo/token-requirement-list preview-props]]]))
+  (let [state (reagent/atom {:sufficient?  false
+                             :many-tokens? false
+                             :condition?   false
+                             :padding?     false})]
+    (fn []
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/token-requirement-list (get-mocked-props @state)]])))

src/status_im2/contexts/quo_preview/counter/counter.cljs

@@ -1,52 +1,23 @@
 (ns status-im2.contexts.quo-preview.counter.counter
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Type:"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :default
-               :value "Default"}
-              {:key   :secondary
-               :value "Secondary"}
-              {:key   :grey
-               :value "Grey"}
-              {:key   :outline
-               :value "Outline"}]}
-   {:label "Value"
-    :key   :value
-    :type  :text}
-   {:label   "Customization color:"
-    :key     :customization-color
-    :type    :select
-    :options (map (fn [color]
-                    (let [k (get color :name)]
-                      {:key k :value k}))
-                  (quo/picker-colors))}])
+    :options [{:key :default}
+              {:key :secondary}
+              {:key :grey}
+              {:key :outline}]}
+   {:key  :value
+    :type :text}
+   (preview/customization-color-option)])
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom {:value 5 :type :default})]
+  (let [state (reagent/atom {:value "5"
+                             :type  :default})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo/counter @state (:value @state)]]]])))
-
-(defn preview-counter
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/counter @state (:value @state)]])))

src/status_im2/contexts/quo_preview/counter/step.cljs

@@ -1,46 +1,28 @@
 (ns status-im2.contexts.quo-preview.counter.step
-  (:require [quo2.core :as quo2]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Type:"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :neutral
-               :value "Neutral (default)"}
-              {:key   :active
-               :value "Active"}
-              {:key   :complete
-               :value "Complete"}]}
-   {:label "In blur view?"
-    :key   :in-blur-view?
-    :type  :boolean}
-   {:label "Value"
-    :key   :value
-    :type  :text}])
+    :options [{:key :neutral}
+              {:key :active}
+              {:key :complete}]}
+   {:key  :in-blur-view?
+    :type :boolean}
+   {:key  :value
+    :type :text}])
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom {:value 5 :type :neutral :in-blur-view? false})]
+  (let [state (reagent/atom {:value         "5"
+                             :type          :neutral
+                             :in-blur-view? false})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo2/step @state (:value @state)]]]])))
-
-(defn preview-step
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:in-blur-view? @state)
+        :show-blur-background? (:in-blur-view? @state)}
+       [quo/step @state (:value @state)]])))

src/status_im2/contexts/quo_preview/dividers/date.cljs

@@ -1,33 +1,14 @@
 (ns status-im2.contexts.quo-preview.dividers.date
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Value"
-    :key   :label
-    :type  :text}])
-(defn cool-preview
+  [{:key :label :type :text}])
+
+(defn view
   []
   (let [state (reagent/atom {:label "Today"})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view {:padding-vertical 60}
-         [quo/divider-date (@state :label)]]]])))
-
-(defn preview-divider-date
-  []
-  [rn/view
-   {:background-color (colors/theme-colors
-                       colors/white
-                       colors/neutral-95)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/divider-date (@state :label)]])))

src/status_im2/contexts/quo_preview/dividers/divider_label.cljs

@@ -4,26 +4,48 @@
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:type :text :key :label}
-   {:type :text :key :counter-value}
-   {:type :boolean :key :increase-padding-top?}
-   {:type :boolean :key :blur?}
-   {:key     :chevron-position
+  [{:key  :label
+    :type :text}
+   {:key     :chevron
     :type    :select
-    :options [{:key :left}
-              {:key :right}]}])
+    :options [{:key   :left
+               :value "Left"}
+              {:key   :right
+               :value "Right"}
+              {:key   nil
+               :value "None"}]}
+   {:key     :chevron-icon
+    :type    :select
+    :options [{:key   :i/chevron-down
+               :value "Chevron Down"}
+              {:key   :i/chevron-right
+               :value "Chevron Right"}]}
+   {:key  :tight?
+    :type :boolean}
+   {:key  :counter?
+    :type :boolean}
+   {:key  :counter-value
+    :type :text}
+   {:key  :blur?
+    :type :boolean}])
 
 (defn view
   []
-  (let [state (reagent/atom {:blur?                 false
-                             :chevron-position      :left
-                             :counter-value         "0"
-                             :increase-padding-top? true
-                             :label                 "Welcome"})]
+  (let [state (reagent/atom {:label         "Welcome"
+                             :chevron       nil
+                             :chevron-icon  nil
+                             :tight?        true
+                             :counter?      false
+                             :counter-value 0
+                             :blur?         false})]
     (fn []
       [preview/preview-container
        {:state                 state
         :descriptor            descriptor
         :blur?                 (:blur? @state)
         :show-blur-background? true}
-       [quo/divider-label @state]])))
+       [quo/divider-label
+        (assoc @state
+               :on-press
+               #(js/alert "Divider label pressed!"))
+        (:label @state)]])))

src/status_im2/contexts/quo_preview/dividers/new_messages.cljs

@@ -1,62 +1,30 @@
 (ns status-im2.contexts.quo-preview.dividers.new-messages
-  (:require [quo2.components.dividers.new-messages :as new-messages]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
-            [utils.i18n :as i18n]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Label"
-    :key   :label
-    :type  :text}
-   {:label   "Color"
-    :key     :color
+  [{:key  :label
+    :type :text}
+   {:key     :color
     :type    :select
-    :options [{:key   :primary
-               :value "Primary"}
-              {:key   :purple
-               :value "Purple"}
-              {:key   :indigo
-               :value "Indigo"}
-              {:key   :turquoise
-               :value "Turquoise"}
-              {:key   :blue
-               :value "Blue"}
-              {:key   :green
-               :value "Green"}
-              {:key   :yellow
-               :value "yellow"}
-              {:key   :orange
-               :value "Orange"}
-              {:key   :red
-               :value "Red"}
-              {:key   :pink
-               :value "Pink"}
-              {:key   :brown
-               :value "Brown"}
-              {:key   :beige
-               :value "Beige"}]}])
-(defn cool-preview
+    :options [{:key :primary}
+              {:key :purple}
+              {:key :indigo}
+              {:key :turquoise}
+              {:key :blue}
+              {:key :green}
+              {:key :yellow}
+              {:key :orange}
+              {:key :red}
+              {:key :pink}
+              {:key :brown}
+              {:key :beige}]}])
+
+(defn view
   []
-  (let [state (reagent/atom {:label (i18n/label :new-messages-header)
+  (let [state (reagent/atom {:label "New messages"
                              :color :primary})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view {:padding-vertical 60}
-         [new-messages/new-messages @state]]]])))
-
-(defn preview-new-messages
-  []
-  [rn/view
-   {:background-color (colors/theme-colors
-                       colors/white
-                       colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/new-messages @state]])))

src/status_im2/contexts/quo_preview/dividers/strength_divider.cljs

@@ -1,55 +1,28 @@
 (ns status-im2.contexts.quo-preview.dividers.strength-divider
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Type"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :very-weak
-               :value "Very weak"}
-              {:key   :weak
-               :value "Weak"}
-              {:key   :okay
-               :value "Okay"}
-              {:key   :strong
-               :value "Strong"}
-              {:key   :very-strong
-               :value "Very strong"}
-              {:key   :alert
-               :value "Alert"}
-              {:key   :info
-               :value "Info"}]}
-   {:label "Text(only works for info/alert)"
+    :options [{:key :very-weak}
+              {:key :weak}
+              {:key :okay}
+              {:key :strong}
+              {:key :very-strong}
+              {:key :alert}
+              {:key :info}]}
+   {:label "Text (only works for info/alert)"
     :key   :text
     :type  :text}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:text "Common password, shouldn’t be used"
-                             :type :alert})
-        text  (reagent/cursor state [:text])
-        type  (reagent/cursor state [:type])]
+                             :type :alert})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view {:padding-vertical 60 :background-color colors/neutral-95}
-         [quo/strength-divider {:type @type} @text]]]])))
-
-(defn preview-strength-divider
-  []
-  [rn/view
-   {:background-color (colors/theme-colors
-                       colors/white
-                       colors/neutral-95)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
-
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/strength-divider
+        {:type (:type @state)}
+        (:text @state)]])))

src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs

@@ -1,26 +1,21 @@
 (ns status-im2.contexts.quo-preview.drawers.action-drawers
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
-            [utils.re-frame :as rf]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [utils.re-frame :as rf]))
 
 (def descriptor
-  [{:label "Muted?"
-    :key   :muted?
-    :type  :boolean}
-   {:label "Mark as read disabled?"
-    :key   :mark-as-read-disabled?
-    :type  :boolean}
-   {:label "Show red options?"
-    :key   :show-red-options?
-    :type  :boolean}
-   {:label   "Drawer theme"
-    :key     :theme
+  [{:key  :muted?
+    :type :boolean}
+   {:key  :mark-as-read-disabled?
+    :type :boolean}
+   {:key  :show-red-options?
+    :type :boolean}
+   {:key     :theme
     :type    :select
-    :options [{:key :dark :value "Dark"}
-              {:key :light :value "Light"}
+    :options [{:key :dark}
+              {:key :light}
               {:key nil :value "System"}]}])
 
 (def options-with-consequences
@@ -30,7 +25,7 @@
     :add-divider? true
     :on-press     #(js/alert "clear history")}])
 
-(defn render-action-sheet
+(defn action-sheet
   [state]
   [quo/action-drawer
    (cond->
@@ -58,31 +53,17 @@
      (:show-red-options? @state)
      (conj options-with-consequences))])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:muted?            true
                              :show-red-options? true})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 400}
-        [preview/customizer state descriptor]
-        [quo/button
-         {:container-style {:margin-horizontal 40}
-          :on-press        #(rf/dispatch [:show-bottom-sheet
-                                          {:content (fn [] [render-action-sheet state])
-                                           :theme   (:theme @state)}])}
-         "See in bottom sheet"]
-        [rn/view {:padding-vertical 60}
-         [render-action-sheet state]]]])))
-
-(defn preview-action-drawers
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-95)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :nestedScrollEnabled          true
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       (fn [_ index] (str "actions-drawers-" index))}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/button
+        {:container-style {:margin-horizontal 40}
+         :on-press        #(rf/dispatch [:show-bottom-sheet
+                                         {:content (fn [] [action-sheet state])
+                                          :theme   (:theme @state)}])}
+        "See in bottom sheet"]
+       [rn/view {:padding-vertical 60}
+        [action-sheet state]]])))

src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs

@@ -7,27 +7,23 @@
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Title"
-    :key   :title
-    :type  :text}
-   {:label "Show button"
-    :key   :show-button?
-    :type  :boolean}
-   {:label "Button label"
-    :key   :button-label
-    :type  :text}
-   {:label "Shell"
-    :key   :shell?
-    :type  :boolean}])
+  [{:key  :title
+    :type :text}
+   {:key  :show-button?
+    :type :boolean}
+   {:key  :button-label
+    :type :text}
+   {:key  :shell?
+    :type :boolean}])
 
 (defn documentation-content
-  [override-theme]
-  [quo/text {:style {:color (colors/theme-colors colors/neutral-100 colors/white override-theme)}}
+  [theme]
+  [quo/text {:style {:color (colors/theme-colors colors/neutral-100 colors/white theme)}}
    "Group chats are conversations of more than two people. To invite someone to a group chat, you need to have them on your Status contact list."])
 
 (defn documentation-content-full
-  [override-theme]
-  (let [text-color (colors/theme-colors colors/neutral-100 colors/white override-theme)
+  [theme]
+  (let [text-color (colors/theme-colors colors/neutral-100 colors/white theme)
         text-style {:color text-color :margin-bottom 10}]
     [rn/view
      [quo/text {:style text-style}
@@ -75,7 +71,7 @@
      [quo/text {:style text-style}
       "Group chats are always end-to-end encrypted with secure cryptographic keys. Only the group chat members will have access to the messages in it. Status doesn't have the keys and can't access any messages by design."]]))
 
-(defn render-documenation-drawer
+(defn documenation-drawer
   [title show-button? button-label expanded? shell?]
   [quo/documentation-drawers
    {:title           title
@@ -88,45 +84,26 @@
      [documentation-content-full (when shell? :dark)]
      [documentation-content (when shell? :dark)])])
 
-(defn cool-preview
+(defn view
   []
-  (let
-    [state
-     (reagent/atom
-      {:title        "Create a group chat"
-       :button-label "Read more"})
-     title (reagent/cursor state [:title])
-     show-button? (reagent/cursor state [:show-button?])
-     button-label (reagent/cursor state [:button-label])
-     shell? (reagent/cursor state [:shell?])
-     expanded? (reagent/atom false)]
+  (let [state        (reagent/atom {:title        "Create a group chat"
+                                    :button-label "Read more"})
+        title        (reagent/cursor state [:title])
+        show-button? (reagent/cursor state [:show-button?])
+        button-label (reagent/cursor state [:button-label])
+        shell?       (reagent/cursor state [:shell?])
+        expanded?    (reagent/atom false)]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view {:padding-vertical 60}
-         [quo/button
-          {:container-style {:margin-horizontal 40
-                             :margin-bottom     20}
-           :on-press        #(rf/dispatch [:show-bottom-sheet
-                                           {:content     (constantly [render-documenation-drawer @title
-                                                                      @show-button?
-                                                                      @button-label expanded? @shell?])
-                                            :expandable? @show-button?
-                                            :shell?      @shell?
-                                            :expanded?   @expanded?}])}
-          "Open drawer"]
-         [render-documenation-drawer @title @show-button? @button-label expanded?]]]])))
-
-(defn preview-documenation-drawers
-  []
-  [rn/view
-   {:background-color (colors/theme-colors
-                       colors/white
-                       colors/neutral-95)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/button
+        {:container-style {:margin-horizontal 40
+                           :margin-bottom     20}
+         :on-press        #(rf/dispatch [:show-bottom-sheet
+                                         {:content     (constantly [documenation-drawer @title
+                                                                    @show-button?
+                                                                    @button-label expanded? @shell?])
+                                          :expandable? @show-button?
+                                          :shell?      @shell?
+                                          :expanded?   @expanded?}])}
+        "Open drawer"]
+       [documenation-drawer @title @show-button? @button-label expanded?]])))

src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs

@@ -1,20 +1,16 @@
 (ns status-im2.contexts.quo-preview.drawers.drawer-buttons
   (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Top Heading"
-    :key   :top-heading
-    :type  :text}
-   {:label "Top Sub heading"
-    :key   :top-sub-heading
-    :type  :text}
-   {:label "Bottom heading"
-    :key   :bottom-heading
-    :type  :text}])
+  [{:key  :top-heading
+    :type :text}
+   {:key  :top-sub-heading
+    :type :text}
+   {:key  :bottom-heading
+    :type :text}])
 
 (defn text-with-link
   []
@@ -35,40 +31,20 @@
      :weight   :semi-bold}
     "Terms of Use"]])
 
-(defn render-drawer-buttons
-  [state]
-  [rn/view
-   {:height           300
-    :background-color (colors/theme-colors colors/white colors/neutral-95)}
-   [quo/drawer-buttons
-    {:container-style {:margin-left  40
-                       :margin-right 24}
-     :top-card        {:on-press #(js/alert "top card clicked")
-                       :heading  (:top-heading @state)}
-     :bottom-card     {:on-press #(js/alert "bottom card clicked")
-                       :heading  (:bottom-heading @state)}}
-    (:top-sub-heading @state) [text-with-link]]])
-
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom {:top-heading     "Sign in "
+  (let [state (reagent/atom {:top-heading     "Sign in"
                              :top-sub-heading "You already use Status"
-                             :bottom-heading  "I’m new to Status"})]
+                             :bottom-heading  "I'm new to Status"})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 400}
-        [preview/customizer state descriptor]
-        [rn/view {:padding-vertical 60}
-         [render-drawer-buttons state]]]])))
-
-(defn preview-drawer-buttons
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-95)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :nestedScrollEnabled          true
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       :id}]])
+      [preview/preview-container
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:margin-top 40}}
+       [quo/drawer-buttons
+        {:top-card    {:on-press #(js/alert "top card clicked")
+                       :heading  (:top-heading @state)}
+         :bottom-card {:on-press #(js/alert "bottom card clicked")
+                       :heading  (:bottom-heading @state)}}
+        (:top-sub-heading @state)
+        [text-with-link]]])))

src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs

@@ -5,6 +5,8 @@
             [react-native.core :as rn]
             [status-im2.common.resources :as resources]))
 
+(def token-icon (resources/get-mock-image :status-logo))
+
 (defn example-1
   []
   [:<>
@@ -13,14 +15,12 @@
     {:size             24
      :locked?          false
      :tokens           [{:id    1
-                         :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}
-                                 {:id 2 :token-icon (resources/get-mock-image :status-logo)}
-                                 {:id 3 :token-icon (resources/get-mock-image :status-logo)}
-                                 {:id 4 :token-icon (resources/get-mock-image :status-logo)}
-                                 {:id 5 :token-icon (resources/get-mock-image :status-logo)}]}]
-     :background-color (colors/theme-colors
-                        colors/neutral-10
-                        colors/neutral-80)}]
+                         :group [{:id 1 :token-icon token-icon}
+                                 {:id 2 :token-icon token-icon}
+                                 {:id 3 :token-icon token-icon}
+                                 {:id 4 :token-icon token-icon}
+                                 {:id 5 :token-icon token-icon}]}]
+     :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)}]
    [quo/text
     {:style {:margin-left  4
              :margin-right 4}} "Or"]
@@ -28,14 +28,12 @@
     {:size             24
      :locked?          false
      :tokens           [{:id    1
-                         :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}
-                                 {:id 2 :token-icon (resources/get-mock-image :status-logo)}
-                                 {:id 3 :token-icon (resources/get-mock-image :status-logo)}
-                                 {:id 4 :token-icon (resources/get-mock-image :status-logo)}
-                                 {:id 5 :token-icon (resources/get-mock-image :status-logo)}]}]
-     :background-color (colors/theme-colors
-                        colors/neutral-10
-                        colors/neutral-80)}]
+                         :group [{:id 1 :token-icon token-icon}
+                                 {:id 2 :token-icon token-icon}
+                                 {:id 3 :token-icon token-icon}
+                                 {:id 4 :token-icon token-icon}
+                                 {:id 5 :token-icon token-icon}]}]
+     :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)}]
    [quo/text {:style {:margin-left 4}} "To post"]])
 
 (defn example-2
@@ -53,7 +51,7 @@
    [quo/icon :i/communities {:color (colors/theme-colors colors/neutral-100 colors/white)}]
    [quo/text {:style {:margin-right 4}} "Join community to post"]])
 
-(defn cool-preview
+(defn view
   []
   (fn []
     [:<>
@@ -63,15 +61,3 @@
       [quo/permission-context [example-2] #(js/alert "drawer pressed")]]
      [rn/view {:margin-top 60}
       [quo/permission-context [example-3] #(js/alert "drawer pressed")]]]))
-
-(defn preview-permission-drawers
-  []
-  [rn/view
-   {:style {:background-color (colors/theme-colors colors/neutral-20 colors/neutral-100)}
-    :flex  1}
-   [rn/flat-list
-    {:flex                         1
-     :nested-scroll-enabled        true
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       hash}]])

src/status_im2/contexts/quo_preview/dropdowns/dropdown.cljs

@@ -1,32 +1,20 @@
 (ns status-im2.contexts.quo-preview.dropdowns.dropdown
-  (:require [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]
-            [quo2.core :as quo]))
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Type:"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :primary
-               :value "Primary"}
-              {:key   :secondary
-               :value "Secondary"}
-              {:key   :grey
-               :value "Grey"}
-              {:key   :dark-grey
-               :value "Dark Grey"}
-              {:key   :outline
-               :value "Outline"}
-              {:key   :ghost
-               :value "Ghost"}
-              {:key   :danger
-               :value "Danger"}
-              {:key   :positive
-               :value "Positive"}]}
-   {:label   "Size:"
-    :key     :size
+    :options [{:key :primary}
+              {:key :secondary}
+              {:key :grey}
+              {:key :dark-grey}
+              {:key :outline}
+              {:key :ghost}
+              {:key :danger}
+              {:key :positive}]}
+   {:key     :size
     :type    :select
     :options [{:key   56
                :value "56"}
@@ -36,20 +24,17 @@
                :value "32"}
               {:key   24
                :value "24"}]}
-   {:label "Icon:"
-    :key   :icon
-    :type  :boolean}
+   {:key  :icon
+    :type :boolean}
    {:label "Before icon:"
     :key   :before
     :type  :boolean}
-   {:label "Disabled:"
-    :key   :disabled
-    :type  :boolean}
-   {:label "Label"
-    :key   :label
-    :type  :text}])
+   {:key  :disabled
+    :type :boolean}
+   {:key  :label
+    :type :text}])
 
-(defn cool-preview
+(defn view
   []
   (let [state  (reagent/atom {:label "Press Me"
                               :size  40})
@@ -57,32 +42,16 @@
         before (reagent/cursor state [:before])
         icon   (reagent/cursor state [:icon])]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view
-         {:padding-vertical 60
-          :flex-direction   :row
-          :justify-content  :center}
-         [quo/dropdown
-          (merge (dissoc @state
-                  :theme
-                  :before
-                  :after)
-                 {:on-press #(println "Hello world!")}
-                 (when @before
-                   {:before :i/placeholder}))
-          (if @icon :i/placeholder @label)]]]])))
-
-(defn preview-dropdown
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :flex-grow                    1
-     :nestedScrollEnabled          true
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:align-items :center}}
+       [quo/dropdown
+        (merge (dissoc @state
+                :theme
+                :before
+                :after)
+               {:on-press #(println "Hello world!")}
+               (when @before
+                 {:before :i/placeholder}))
+        (if @icon :i/placeholder @label)]])))

src/status_im2/contexts/quo_preview/dropdowns/network_dropdown.cljs

@@ -8,35 +8,27 @@
 (def descriptor
   [{:key     :state
     :type    :select
-    :options [{:key   :default
-               :value "Default"}
-              {:key   :disabled
-               :value "Disabled"}]}
+    :options [{:key :default}
+              {:key :disabled}]}
    {:key     :blur?
     :type    :select
-    :options [{:key   true
-               :value "True"}
-              {:key   false
-               :value "False"}]}
+    :options [{:key true}
+              {:key false}]}
    {:key     :amount
     :type    :select
-    :options [{:key   1
-               :value 1}
-              {:key   2
-               :value 2}
-              {:key   3
-               :value 3}]}])
+    :options [{:key 1}
+              {:key 2}
+              {:key 3}]}])
 
 (def ^:private networks-list
   [{:source (quo.resources/get-network :ethereum)}
    {:source (quo.resources/get-network :optimism)}
    {:source (quo.resources/get-network :arbitrum)}])
 
-(defn preview-dropdown
+(defn view
   []
   (let [component-state (reagent/atom {:state :default :blur? false :amount 3})]
     (fn []
-
       [preview/preview-container
        {:state                 component-state
         :descriptor            descriptor

src/status_im2/contexts/quo_preview/empty_state/empty_state.cljs

@@ -1,40 +1,28 @@
 (ns status-im2.contexts.quo-preview.empty-state.empty-state
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]
-            [status-im2.common.resources :as resources]))
+            [status-im2.common.resources :as resources]
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Title:"
-    :key   :title
-    :type  :text}
-   {:label "Description:"
-    :key   :description
-    :type  :text}
-   {:label   "Image:"
-    :key     :image
+  [{:key  :title
+    :type :text}
+   {:key  :description
+    :type :text}
+   {:key     :image
     :type    :select
-    :options [{:key   :no-contacts-light
-               :value "No contacts light"}
-              {:key   :no-contacts-dark
-               :value "No contacts dark"}
-              {:key   :no-messages-light
-               :value "No messages light"}
-              {:key   :no-messages-dark
-               :value "No messages dark"}]}
-   {:label "Upper button text"
-    :key   :upper-button-text
-    :type  :text}
-   {:label "Lower button text"
-    :key   :lower-button-text
-    :type  :text}
-   {:label "Blur:"
-    :key   :blur?
-    :type  :boolean}])
+    :options [{:key :no-contacts-light}
+              {:key :no-contacts-dark}
+              {:key :no-messages-light}
+              {:key :no-messages-dark}]}
+   {:key  :upper-button-text
+    :type :text}
+   {:key  :lower-button-text
+    :type :text}
+   {:key  :blur?
+    :type :boolean}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:image             :no-messages-light
                              :title             "A big friendly title"
@@ -43,42 +31,18 @@
                              :upper-button-text "Send community link"
                              :lower-button-text "Invite friends to Status"})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view
-         {:style {:margin-vertical  24
-                  :background-color (when (:blur? @state) colors/neutral-95)}}
-         [preview/blur-view
-          {:style                 {:width       "100%"
-                                   :align-items :center
-                                   :top         (if (:blur? @state) 32 16)
-                                   :position    (if (:blur? @state)
-                                                  :absolute
-                                                  :relative)}
-           :height                300
-           :show-blur-background? (:blur? @state)
-           :blur-view-props       (when (:blur? @state)
-                                    {:overlay-color colors/neutral-80-opa-80})}
-
-          [rn/view {:style {:flex 1 :width "100%"}}
-           [quo/empty-state
-            (-> @state
-                (assoc :upper-button
-                       {:text     (:upper-button-text @state)
-                        :on-press #(js/alert "Upper button")})
-                (assoc :lower-button
-                       {:text     (:lower-button-text @state)
-                        :on-press #(js/alert "Lower button")})
-                (update :image resources/get-image))]]]]]])))
-
-(defn preview-empty-state
-  []
-  [rn/view
-   {:style {:flex             1
-            :background-color (colors/theme-colors colors/white colors/neutral-95)}}
-   [rn/flat-list
-    {:style                        {:flex 1}
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :blur-height           300
+        :show-blur-background? true}
+       [quo/empty-state
+        (-> @state
+            (assoc :upper-button
+                   {:text     (:upper-button-text @state)
+                    :on-press #(js/alert "Upper button")})
+            (assoc :lower-button
+                   {:text     (:lower-button-text @state)
+                    :on-press #(js/alert "Lower button")})
+            (update :image resources/get-image))]])))

src/status_im2/contexts/quo_preview/foundations/shadows.cljs

@@ -24,50 +24,36 @@
                    (when shadow? shadow-style))}]])
 
 (def descriptor
-  [{:label "Shadows enabled?"
-    :key   :shadow?
-    :type  :boolean}])
+  [{:key  :shadow?
+    :type :boolean}])
 
-(defn cool-preview
+(defn view
   []
   (let [state   (reagent/atom {:shadow? true})
         shadow? (reagent/cursor state [:shadow?])]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:style {:padding-bottom 150}}
-        [preview/customizer state descriptor]
-        [quo/text
-         {:style {:margin-left  :auto
-                  :margin-right :auto
-                  :align-items  :center}}
-         "Normal Scales"]
-        [demo-box @shadow? "Shadow 1" (shadows/get 1)]
-        [demo-box @shadow? "Shadow 2" (shadows/get 2)]
-        [demo-box @shadow? "Shadow 3" (shadows/get 3)]
-        [demo-box @shadow? "Shadow 4" (shadows/get 4)]
-        [quo/text
-         {:style {:margin-left  :auto
-                  :margin-right :auto
-                  :align-items  :center}}
-         "Inverted Scales"]
-        [demo-box @shadow? "Shadow 1" (shadows/get 1 (quo.theme/get-theme) :inverted)]
-        [demo-box @shadow? "Shadow 2" (shadows/get 2 (quo.theme/get-theme) :inverted)]
-        [demo-box @shadow? "Shadow 3" (shadows/get 3 (quo.theme/get-theme) :inverted)]
-        [demo-box @shadow? "Shadow 4" (shadows/get 4 (quo.theme/get-theme) :inverted)]
-        [quo/text
-         {:style {:margin-left  :auto
-                  :margin-right :auto
-                  :align-items  :center}}
-         "Inverted Scales"]
-        [demo-box @shadow? "Inner Shadow" shadows/inner-shadow]]])))
-
-(defn preview-shadows
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/neutral-30 colors/neutral-95)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/text
+        {:style {:margin-left  :auto
+                 :margin-right :auto
+                 :align-items  :center}}
+        "Normal Scales"]
+       [demo-box @shadow? "Shadow 1" (shadows/get 1)]
+       [demo-box @shadow? "Shadow 2" (shadows/get 2)]
+       [demo-box @shadow? "Shadow 3" (shadows/get 3)]
+       [demo-box @shadow? "Shadow 4" (shadows/get 4)]
+       [quo/text
+        {:style {:margin-left  :auto
+                 :margin-right :auto
+                 :align-items  :center}}
+        "Inverted Scales"]
+       [demo-box @shadow? "Shadow 1" (shadows/get 1 (quo.theme/get-theme) :inverted)]
+       [demo-box @shadow? "Shadow 2" (shadows/get 2 (quo.theme/get-theme) :inverted)]
+       [demo-box @shadow? "Shadow 3" (shadows/get 3 (quo.theme/get-theme) :inverted)]
+       [demo-box @shadow? "Shadow 4" (shadows/get 4 (quo.theme/get-theme) :inverted)]
+       [quo/text
+        {:style {:margin-left  :auto
+                 :margin-right :auto
+                 :align-items  :center}}
+        "Inverted Scales"]
+       [demo-box @shadow? "Inner Shadow" shadows/inner-shadow]])))

src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs

@@ -1,6 +1,5 @@
 (ns status-im2.contexts.quo-preview.gradient.gradient-cover
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
             [quo2.theme :as quo.theme]
             [react-native.blur :as blur]
             [react-native.core :as rn]
@@ -43,7 +42,7 @@
     :key   :blur?
     :type  :boolean}])
 
-(defn cool-preview
+(defn view
   []
   (let [state               (reagent/atom {:customization-color :blue :blur? false})
         blur?               (reagent/cursor state [:blur?])
@@ -54,8 +53,7 @@
                         (when @blur?
                           (quo.theme/set-theme :dark)))
                       [@blur?])
-       [:<>
-        [preview/customizer state descriptor]
+       [preview/preview-container {:state state :descriptor descriptor}
         [rn/view
          {:style {:height        332
                   :margin-top    24
@@ -75,13 +73,6 @@
                        :padding-vertical 40}
            :blur-type :dark}
           [quo/gradient-cover @state]]]
-        [rn/view
-         {:style {:padding-vertical   20
-                  :padding-horizontal 16}}
-         [quo/color-picker
-          {:blur?     @blur?
-           :selected  @customization-color
-           :on-change #(reset! customization-color %)}]]
         [quo/button
          {:container-style {:margin-horizontal 40}
           :on-press        #(rf/dispatch [:show-bottom-sheet
@@ -89,16 +80,3 @@
                                            :gradient-cover?     true
                                            :customization-color @customization-color}])}
          "See in bottom sheet"]])]))
-
-(defn preview-gradient-cover
-  []
-  [rn/view
-   {:background-color (colors/theme-colors
-                       colors/white
-                       colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/graph/wallet_graph.cljs

@@ -1,7 +1,5 @@
 (ns status-im2.contexts.quo-preview.graph.wallet-graph
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
@@ -20,26 +18,17 @@
         (recur (dec n) new-prices new-price volatility)))))
 
 (def descriptor
-  [{:label   "State:"
-    :key     :state
+  [{:key     :state
     :type    :select
-    :options [{:key   :positive
-               :value "Positive"}
-              {:key   :negative
-               :value "Negative"}]}
-   {:label   "Time frame:"
-    :key     :time-frame
+    :options [{:key :positive}
+              {:key :negative}]}
+   {:key     :time-frame
     :type    :select
-    :options [{:key   :empty
-               :value "Empty"}
-              {:key   :1-week
-               :value "1 Week"}
-              {:key   :1-month
-               :value "1 Month"}
-              {:key   :3-months
-               :value "3 Months"}
-              {:key   :1-year
-               :value "1 Year"}
+    :options [{:key :empty}
+              {:key :1-week}
+              {:key :1-month}
+              {:key :3-months}
+              {:key :1-year}
               {:key   :all-time
                :value "All time (500 years data)"}]}])
 
@@ -61,30 +50,16 @@
                       0.005)]
     (generate-crypto-token-prices data-points volatility)))
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:state      :positive
                              :time-frame :1-week})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [quo/wallet-graph
-         {:data       (generate-data (:time-frame @state))
-          :state      (:state @state)
-          :time-frame (:time-frame @state)}]]])))
-
-(defn preview-wallet-graph
-  []
-  [rn/view
-   {:style
-    {:background-color (colors/theme-colors
-                        colors/white
-                        colors/neutral-95)
-     :flex             1}}
-   [rn/flat-list
-    {:style                        {:flex 1}
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str
-     :scroll-enabled               false}]])
+      [preview/preview-container
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-horizontal 0 :margin-top 200}}
+       [quo/wallet-graph
+        {:data       (generate-data (:time-frame @state))
+         :state      (:state @state)
+         :time-frame (:time-frame @state)}]])))

src/status_im2/contexts/quo_preview/info/info_message.cljs

@@ -1,53 +1,27 @@
 (ns status-im2.contexts.quo-preview.info.info-message
-  (:require [quo2.components.info.info-message :as quo2]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.components.info.info-message :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Type:"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :default
-               :value "Default"}
-              {:key   :success
-               :value "Success"}
-              {:key   :error
-               :value "Error"}]}
-   {:label   "Size:"
-    :key     :size
+    :options [{:key :default}
+              {:key :success}
+              {:key :error}]}
+   {:key     :size
     :type    :select
-    :options [{:key   :default
-               :value "Default"}
-              {:key   :tiny
-               :value "Tiny"}]}
-   {:label "Message"
-    :key   :message
-    :type  :text}])
+    :options [{:key :default}
+              {:key :tiny}]}
+   {:key  :message
+    :type :text}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:type    :default
                              :size    :default
                              :icon    :i/placeholder
                              :message "This is a message"})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo2/info-message @state (:message @state)]]]])))
-
-(defn preview-info-message
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/info-message @state (:message @state)]])))

src/status_im2/contexts/quo_preview/info/information_box.cljs

@@ -1,38 +1,28 @@
 (ns status-im2.contexts.quo-preview.info.information-box
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Type:"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :default
-               :value "Default"}
-              {:key   :informative
-               :value "Informative"}
-              {:key   :error
-               :value "Error"}]}
-   {:label "Closable?"
-    :key   :closable?
-    :type  :boolean}
-   {:label "Message"
-    :key   :message
-    :type  :text}
-   {:label "Button Label"
-    :key   :button-label
-    :type  :text}])
+    :options [{:key :default}
+              {:key :informative}
+              {:key :error}]}
+   {:key  :closable?
+    :type :boolean}
+   {:key  :message
+    :type :text}
+   {:key  :button-label
+    :type :text}])
 
-(defn cool-preview
+(defn view
   []
-  (let [state     (reagent/atom
-                   {:type         :default
-                    :closable?    true
-                    :message      (str "If you registered a stateofus.eth name "
-                                       "you might be eligible to connect $ENS")
-                    :button-label "Button"})
+  (let [state     (reagent/atom {:type         :default
+                                 :closable?    true
+                                 :message      (str "If you registered a stateofus.eth name "
+                                                    "you might be eligible to connect $ENS")
+                                 :button-label "Button"})
         closable? (reagent/cursor state [:closable?])
         closed?   (reagent/cursor state [:closed?])
         on-close  (fn []
@@ -40,26 +30,10 @@
                     (js/setTimeout (fn [] (reset! closed? false))
                                    2000))]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view
-        [preview/customizer state descriptor]
-        [rn/view
-         {:style {:padding-vertical 20
-                  :align-items      :center}}
-         [quo/information-box
-          (merge {:icon     :i/info
-                  :style    {:width 335}
-                  :on-close (when @closable? on-close)}
-                 @state)
-          (:message @state)]]]])))
-
-(defn preview-information-box
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/information-box
+        (merge {:icon     :i/info
+                :style    {:width 335}
+                :on-close (when @closable? on-close)}
+               @state)
+        (:message @state)]])))

src/status_im2/contexts/quo_preview/inputs/input.cljs

@@ -1,48 +1,33 @@
 (ns status-im2.contexts.quo-preview.inputs.input
   (:require [clojure.string :as string]
             [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Type:"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :text
-               :value "Text"}
-              {:key   :password
-               :value "Password"}]}
-   {:label "Blur:"
-    :key   :blur?
-    :type  :boolean}
-   {:label "Error:"
-    :key   :error?
-    :type  :boolean}
-   {:label "Icon:"
-    :key   :icon-name
-    :type  :boolean}
-   {:label "Disabled:"
-    :key   :disabled?
-    :type  :boolean}
-   {:label "Clearable:"
-    :key   :clearable?
-    :type  :boolean}
-   {:label "Small:"
-    :key   :small?
-    :type  :boolean}
-   {:label "Multiline:"
-    :key   :multiline
-    :type  :boolean}
-   {:label "Button:"
-    :key   :button
-    :type  :boolean}
-   {:label "Label:"
-    :key   :label
-    :type  :text}
-   {:label   "Char limit:"
-    :key     :char-limit
+    :options [{:key :text}
+              {:key :password}]}
+   {:key  :blur?
+    :type :boolean}
+   {:key  :error?
+    :type :boolean}
+   {:key  :icon-name
+    :type :boolean}
+   {:key  :disabled?
+    :type :boolean}
+   {:key  :clearable?
+    :type :boolean}
+   {:key  :small?
+    :type :boolean}
+   {:key  :multiline
+    :type :boolean}
+   {:key  :button
+    :type :boolean}
+   {:key  :label
+    :type :text}
+   {:key     :char-limit
     :type    :select
     :options [{:key   10
                :value "10"}
@@ -50,14 +35,13 @@
                :value "50"}
               {:key   100
                :value "100"}]}
-   {:label "Value:"
-    :key   :value
-    :type  :text}])
+   {:key  :value
+    :type :text}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:type                :text
-                             :blur                false
+                             :blur?               false
                              :placeholder         "Type something"
                              :error               false
                              :icon-name           false
@@ -66,36 +50,23 @@
                              :on-char-limit-reach #(js/alert
                                                     (str "Char limit reached: " %))})]
     (fn []
-      (let [blank-label? (string/blank? (:label @state))
-            icon?        (boolean (:icon-name @state))
-            button-props {:on-press #(js/alert "Button pressed!")
-                          :text     "My button"}]
-        [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-         [rn/view {:style {:padding-bottom 150}}
-          [rn/view {:style {:flex 1}}
-           [preview/customizer state descriptor]]
-          [preview/blur-view
-           {:style                 {:flex            1
-                                    :align-items     :center
-                                    :margin-vertical 20}
-            :show-blur-background? (:blur? @state)}
-           [rn/view {:style {:width 300}}
-            [quo/input
-             (cond-> @state
-               :always          (assoc
-                                 :on-clear?      #(swap! state assoc :value "")
-                                 :on-change-text #(swap! state assoc :value %))
-               (:button @state) (assoc :button button-props)
-               blank-label?     (dissoc :label)
-               icon?            (assoc :icon-name :i/placeholder))]]]]]))))
+      (let [blank-label? (string/blank? (:label @state))]
+        [preview/preview-container
+         {:state                 state
+          :descriptor            descriptor
+          :blur?                 (:blur? @state)
+          :show-blur-background? true}
+         [quo/input
+          (cond-> (assoc @state
+                         :on-clear?      #(swap! state assoc :value "")
+                         :on-change-text #(swap! state assoc :value %))
+            (:button @state)
+            (assoc :button
+                   {:on-press #(js/alert "Button pressed!")
+                    :text     "My button"})
 
-(defn preview-input
-  []
-  [rn/view
-   {:style {:background-color (colors/theme-colors colors/white colors/neutral-90)
-            :flex             1}}
-   [rn/flat-list
-    {:style                        {:flex 1}
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+            blank-label?
+            (dissoc :label)
+
+            (:icon-name @state)
+            (assoc :icon-name :i/placeholder))]]))))

src/status_im2/contexts/quo_preview/inputs/locked_input.cljs

@@ -1,42 +1,24 @@
 (ns status-im2.contexts.quo-preview.inputs.locked-input
-  (:require [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [quo2.core :as quo]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "show icon"
-    :key   :icon
-    :type  :boolean}
-   {:label "label"
-    :key   :label
-    :type  :text}
-   {:label "Value"
-    :key   :value
-    :type  :text}])
+  [{:key :icon :type :boolean}
+   {:key :label :type :text}
+   {:key :value :type :text}])
 
-(defn preview-locked-input
+(defn view
   []
   (let [state (reagent/atom {:value "$1,648.34"
                              :label "Network fee"})]
     (fn []
       (let [{:keys [label value icon]} @state]
-        [rn/view
-         {:background-color (colors/theme-colors colors/white colors/neutral-90)
-          :flex             1
-          :flex-direction   :column
-          :padding-top      20
-          :padding-left     20}
-         [rn/view {:style {:height 200}}
-          [preview/customizer state descriptor]]
-         [rn/view
-          {:style {:margin-top     11
-                   :flex-direction :row}}
-          [quo/locked-input
-           {:icon            (when icon :i/gas)
-            :label           label
-            :container-style {:margin-right      20
-                              :margin-horizontal 20
-                              :flex              1}}
-           value]]]))))
+        [preview/preview-container {:state state :descriptor descriptor}
+         [quo/locked-input
+          {:icon            (when icon :i/gas)
+           :label           label
+           :container-style {:margin-right      20
+                             :margin-horizontal 20
+                             :flex              1}}
+          value]]))))

src/status_im2/contexts/quo_preview/inputs/profile_input.cljs

@@ -1,67 +1,42 @@
 (ns status-im2.contexts.quo-preview.inputs.profile-input
-  (:require [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [reagent.core :as reagent]
-            [quo2.core :as quo]
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
             [react-native.blur :as blur]
+            [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "disabled?"
-    :key   :disabled?
-    :type  :boolean}
-   {:label "image selected?"
-    :key   :image-selected?
-    :type  :boolean}
-   {:label   "Custom Color"
-    :key     :color
-    :type    :select
-    :options (map (fn [color]
-                    (let [k (get color :name)]
-                      {:key k :value k}))
-                  (quo/picker-colors))}])
+  [{:key  :disabled?
+    :type :boolean}
+   {:key  :image-selected?
+    :type :boolean}
+   (preview/customization-color-option {:key :color})])
 
-(defn cool-preview
+(defn view
   []
   (let [state          (reagent/atom {:color           :blue
                                       :image-selected? false
                                       :disabled?       false})
         max-length     24
-
         value          (reagent/atom "")
         on-change-text #(reset! value %)]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [rn/view {:flex 1}]
-        [preview/customizer state descriptor]
-        [blur/view
-         {:background-color  colors/neutral-80-opa-80
-          :flex-direction    :row
-          :margin-horizontal 20
-          :justify-content   :center}
-         [quo/profile-input
-          {:default-value       ""
-           :on-change-text      on-change-text
-           :customization-color (:color @state)
-           :placeholder         "Your Name"
-           :on-press            #(js/alert "show image selector")
-           :image-picker-props  {:profile-picture (when (:image-selected? @state)
-                                                    (resources/get-mock-image :user-picture-male5))
-                                 :full-name       @value}
-           :title-input-props   {:disabled?      (:disabled? @state)
-                                 :max-length     max-length
-                                 :on-change-text on-change-text}}]]]])))
-
-(defn preview-profile-input
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white
-                                           colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [blur/view
+        {:background-color  colors/neutral-80-opa-80
+         :flex-direction    :row
+         :margin-horizontal 20
+         :justify-content   :center}
+        [quo/profile-input
+         {:default-value       ""
+          :on-change-text      on-change-text
+          :customization-color (:color @state)
+          :placeholder         "Your Name"
+          :on-press            #(js/alert "show image selector")
+          :image-picker-props  {:profile-picture (when (:image-selected? @state)
+                                                   (resources/get-mock-image :user-picture-male5))
+                                :full-name       @value}
+          :title-input-props   {:disabled?      (:disabled? @state)
+                                :max-length     max-length
+                                :on-change-text on-change-text}}]]])))

src/status_im2/contexts/quo_preview/inputs/recovery_phrase_input.cljs

@@ -1,76 +1,48 @@
 (ns status-im2.contexts.quo-preview.inputs.recovery-phrase-input
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Text"
-    :key   :text
-    :type  :text}
-   {:label "Placeholder"
-    :key   :placeholder
-    :type  :text}
-   {:label "Blur"
-    :key   :blur?
-    :type  :boolean}
-   {:label "Mark errors"
-    :key   :mark-errors?
-    :type  :boolean}
-   {:label   "Customization color"
-    :key     :customization-color
-    :type    :select
-    :options (map (fn [[color _]]
-                    {:key color :value (name color)})
-                  colors/customization)}
-   {:label   "Word limit"
-    :key     :word-limit
+  [{:key  :text
+    :type :text}
+   {:key  :placeholder
+    :type :text}
+   {:key  :blur?
+    :type :boolean}
+   {:key  :mark-errors?
+    :type :boolean}
+   (preview/customization-color-option)
+   {:key     :word-limit
     :type    :select
     :options [{:key nil :value "No limit"}
               {:key 5 :value "5 words"}
               {:key 10 :value "10 words"}
               {:key 20 :value "20 words"}]}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:text                ""
                              :placeholder         "Type or paste your recovery phrase"
                              :customization-color :blue
                              :word-limit          20
+                             :blur?               false
                              :mark-errors?        true})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:style {:padding-bottom 150}}
-        [rn/view {:style {:flex 1}}
-         [preview/customizer state descriptor]
-         [quo/text {:size :paragraph-2}
-          "(Any word with at least 6 chars is marked as error)"]]
-        [preview/blur-view
-         {:style                 {:align-items     :center
-                                  :margin-vertical 20
-                                  :width           "100%"}
-          :height                200
-          :show-blur-background? (:blur? @state)}
-         [rn/view
-          {:style {:height 150
-                   :width  "100%"}}
-          [quo/recovery-phrase-input
-           {:mark-errors?        (:mark-errors? @state)
-            :error-pred          #(> (count %) 5)
-            :on-change-text      #(swap! state assoc :text %)
-            :placeholder         (:placeholder @state)
-            :customization-color (:customization-color @state)
-            :word-limit          (:word-limit @state)}
-           (:text @state)]]]]])))
-
-(defn preview-recovery-phrase-input
-  []
-  [rn/view
-   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
-            :flex             1}}
-   [rn/flat-list
-    {:style                     {:flex 1}
-     :keyboardShouldPersistTaps :always
-     :header                    [cool-preview]
-     :key-fn                    str}]])
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true}
+       [quo/text {:size :paragraph-2}
+        "(Any word with at least 6 chars is marked as error)"]
+       [rn/view {:style {:height 150}}
+        [quo/recovery-phrase-input
+         {:mark-errors?        (:mark-errors? @state)
+          :error-pred          #(> (count %) 5)
+          :on-change-text      #(swap! state assoc :text %)
+          :placeholder         (:placeholder @state)
+          :customization-color (:customization-color @state)
+          :word-limit          (:word-limit @state)}
+         (:text @state)]]])))

src/status_im2/contexts/quo_preview/inputs/search_input.cljs

@@ -1,23 +1,17 @@
 (ns status-im2.contexts.quo-preview.inputs.search-input
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Value"
-    :key   :value
-    :type  :text}
-   {:label "Blur"
-    :key   :blur?
-    :type  :boolean}
-   {:label "Disabled"
-    :key   :disabled?
-    :type  :boolean}
-   {:label   "Number of Tags"
-    :key     :number-tags
+  [{:key  :value
+    :type :text}
+   {:key  :blur?
+    :type :boolean}
+   {:key  :disabled?
+    :type :boolean}
+   {:key     :number-tags
     :type    :select
     :options (map (fn [n]
                     {:key n :value (str n)})
@@ -35,40 +29,24 @@
     (resources/get-mock-image :user-picture-female2)
     "Freya Odinson"]])
 
-(defn cool-preview
+(defn view
   []
   (let [state          (reagent/atom {:blur?       false
                                       :disabled?   false
                                       :number-tags 0
                                       :placeholder "Search..."
-                                      :value       ""
-                                      :on-clear    #(js/alert "Clear pressed")})
+                                      :value       ""})
         on-change-text (fn [new-text]
                          (swap! state assoc :value new-text))]
     (fn []
       (let [tags (take (:number-tags @state) (example-tags (:blur? @state)))]
-        [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-         [rn/view {:style {:padding-bottom 150}}
-          [rn/view {:style {:flex 1}}
-           [preview/customizer state descriptor]]
-          [preview/blur-view
-           {:style                 {:align-items     :center
-                                    :margin-vertical 20
-                                    :width           "100%"}
-            :show-blur-background? (:blur? @state)}
-           [rn/view {:style {:width "100%"}}
-            [quo/search-input
-             (assoc @state
-                    :tags           tags
-                    :on-change-text on-change-text)]]]]]))))
-
-(defn preview-search-input
-  []
-  [rn/view
-   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
-            :flex             1}}
-   [rn/flat-list
-    {:style                     {:flex 1}
-     :keyboardShouldPersistTaps :always
-     :header                    [cool-preview]
-     :key-fn                    str}]])
+        [preview/preview-container
+         {:state                 state
+          :descriptor            descriptor
+          :blur?                 (:blur? @state)
+          :show-blur-background? true}
+         [quo/search-input
+          (assoc @state
+                 :on-clear       #(swap! state assoc :value "")
+                 :tags           tags
+                 :on-change-text on-change-text)]]))))

src/status_im2/contexts/quo_preview/inputs/title_input.cljs

@@ -1,57 +1,30 @@
 (ns status-im2.contexts.quo-preview.inputs.title-input
-  (:require [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
-            [quo2.core :as quo]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "disabled?"
-    :key   :disabled?
-    :type  :boolean}
-   {:label "blur?"
-    :key   :blur?
-    :type  :boolean}
-   {:label   "Cursor Color"
-    :key     :color
-    :type    :select
-    :options (map (fn [{:keys [name]}] {:key name :value name}) (quo/picker-colors))}])
+  [{:key  :disabled?
+    :type :boolean}
+   {:key  :placeholder
+    :type :text}
+   {:key  :max-length
+    :type :number}
+   {:key  :blur?
+    :type :boolean}
+   (preview/customization-color-option)])
 
-(defn cool-preview
+(defn view
   []
-  (let [state          (reagent/atom {:color     nil
-                                      :blur?     false
-                                      :disabled? false})
-        max-length     24
-        on-change-text (fn [_v]
-                         (println (str "cool-preview -> on-change-text called " _v)))]
+  (let [state (reagent/atom {:color       nil
+                             :placeholder "Type something here"
+                             :max-length  24
+                             :blur?       false
+                             :disabled?   false})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [rn/view {:flex 1}]
-        [preview/customizer state descriptor]
-
-        [preview/blur-view
-         {:show-blur-background? (:blur? @state)
-          :style                 {:flex-direction  :row
-                                  :justify-content :center}}
-         [quo/title-input
-          {:max-length          max-length
-           :default-value       ""
-           :on-change-text      on-change-text
-           :disabled?           (:disabled? @state)
-           :customization-color (:color @state)
-           :blur?               (:blur? @state)
-           :placeholder         "type something here"}]]]])))
-
-(defn preview-title-input
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white
-                                           colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true}
+       [quo/title-input (assoc @state :default-value "")]])))

src/status_im2/contexts/quo_preview/keycard/keycard.cljs

@@ -1,37 +1,17 @@
 (ns status-im2.contexts.quo-preview.keycard.keycard
-  (:require [status-im2.contexts.quo-preview.preview :as preview]
-            [react-native.core :as rn]
-            [quo2.foundations.colors :as colors]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
-            [quo2.core :as quo]))
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Holder"
-    :key   :holder-name
-    :type  :text}
-   {:label "Locked?"
-    :key   :locked?
-    :type  :boolean}])
+  [{:key :holder-name :type :text}
+   {:key :locked? :type :boolean}])
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom {:holder-name nil
+  (let [state (reagent/atom {:holder-name ""
                              :locked?     true})]
     (fn
       []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view [preview/customizer state descriptor]
-        [quo/keycard
-         {:holder-name? (:holder-name @state)
-          :locked?      (:locked? @state)}]]])))
-
-(defn preview-keycard
-  []
-  [rn/view
-   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
-            :flex             1}}
-   [rn/flat-list
-    {:style                        {:flex 1}
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/keycard @state]])))

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

@@ -1,27 +1,19 @@
 (ns status-im2.contexts.quo-preview.list-items.account-list-card
-  (:require
-    [quo2.core :as quo]
-    [react-native.core :as rn]
-    [reagent.core :as reagent]
-    [status-im2.contexts.quo-preview.preview :as preview]))
+  (:require [quo2.core :as quo]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "State:"
-    :key     :state
+  [{:key     :state
     :type    :select
-    :options [{:key   :default
-               :value "Default"}
-              {:key   :pressed
-               :value "Pressed"}]}
-   {:label   "Action:"
-    :key     :action
+    :options [{:key :default}
+              {:key :pressed}]}
+   {:key     :action
     :type    :select
-    :options [{:key   :none
-               :value "None"}
-              {:key   :icon
-               :value "Icon"}]}])
+    :options [{:key :none}
+              {:key :icon}]}])
 
-(defn preview
+(defn view
   []
   (let [state (reagent/atom {:account-props {:customization-color :purple
                                              :size                32
@@ -34,9 +26,5 @@
                              :action        :none
                              :on-press      (fn [] (js/alert "Button pressed"))})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view
-        {:style {:flex               1
-                 :padding-horizontal 20}}
-        [rn/view {:style {:min-height 150}} [preview/customizer state descriptor]]
-        [quo/account-list-card @state]]])))
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/account-list-card @state]])))

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

@@ -1,28 +1,20 @@
 (ns status-im2.contexts.quo-preview.list-items.channel
-  (:require [quo2.components.list-items.channel :as quo2-channel]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Muted?:"
-    :key   :muted?
-    :type  :boolean}
-   {:label "Name"
-    :key   :name
-    :type  :text}
-   {:label "Number of mentions"
-    :key   :mentions-count
-    :type  :text}
-   {:label "Unread Messages:"
-    :key   :unread-messages?
-    :type  :boolean}
-   {:label "Avatar emoji"
-    :key   :emoji
-    :type  :text}
-   {:label   "is Locked?"
-    :key     :locked?
+  [{:key  :muted?
+    :type :boolean}
+   {:key  :name
+    :type :text}
+   {:key  :mentions-count
+    :type :text}
+   {:key  :unread-messages?
+    :type :boolean}
+   {:key  :emoji
+    :type :text}
+   {:key     :locked?
     :type    :select
     :options [{:key   nil
                :value "None"}
@@ -30,11 +22,9 @@
                :value "Unlocked"}
               {:key   true
                :value "Locked"}]}
-   {:label "Is Pressed Channel:"
-    :key   :is-active-channel?
-    :type  :boolean}
-   {:label   "Channel color"
-    :key     :channel-color
+   {:key  :is-active-channel?
+    :type :boolean}
+   {:key     :channel-color
     :type    :select
     :options [{:key   "#00FFFF"
                :value "Blue"}
@@ -43,7 +33,7 @@
               {:key   "#FFFF00"
                :value "Yellow"}]}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:is-active-channel? false
                              :muted?             false
@@ -54,27 +44,5 @@
                              :name               "channel"
                              :locked?            true})]
     (fn []
-      [rn/view
-       {:margin-bottom  50
-        :padding-bottom 16
-        :padding-right  8
-        :padding-left   8
-
-        :padding-top    16}
-       [preview/customizer state descriptor]
-       [rn/view
-        {:padding-vertical 60
-         :align-items      :center}
-        [quo2-channel/list-item @state]]])))
-
-(defn preview-channel
-  []
-  [rn/keyboard-avoiding-view {:style {:flex 1}}
-   [rn/view
-    {:background-color (colors/theme-colors colors/white colors/neutral-90)
-     :flex             1}
-    [rn/flat-list
-     {:flex                         1
-      :keyboard-should-persist-taps :always
-      :header                       [cool-preview]
-      :key-fn                       str}]]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/channel-list-item @state]])))

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

@@ -0,0 +1,40 @@
+(ns status-im2.contexts.quo-preview.list-items.dapp
+  (:require [quo2.core :as quo]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [status-im2.common.resources :as resources]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:key     :state
+    :type    :select
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :active
+               :value "Active"}]}
+   {:key     :action
+    :type    :select
+    :options [{:key   :none
+               :value "None"}
+              {:key   :icon
+               :value "Icon"}]}
+   {:key  :blur?
+    :type :boolean}])
+
+(defn preview
+  []
+  (let [state (reagent/atom {:dapp                {:avatar (resources/get-mock-image :coin-gecko)
+                                                   :name   "Coingecko"
+                                                   :value  "coingecko.com"}
+                             :state               :default
+                             :action              :icon
+                             :blur?               false
+                             :customization-color :blue
+                             :on-press-icon       (fn [] (js/alert "Button pressed"))})]
+    (fn []
+      [preview/preview-container {:state state :descriptor descriptor}
+       [rn/view
+        {:padding-vertical 60
+         :flex-direction   :row
+         :justify-content  :center}
+        [quo/dapp @state]]])))

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

@@ -1,16 +1,12 @@
 (ns status-im2.contexts.quo-preview.list-items.preview-lists
-  (:require [quo2.components.list-items.preview-list :as quo2]
-            [quo2.foundations.colors :as colors]
+  (:require [quo2.core :as quo]
             [quo2.foundations.resources :as quo.resources]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
-            [utils.i18n :as i18n]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size:"
-    :key     :size
+  [{:key     :size
     :type    :select
     :options [{:key   32
                :value "32"}
@@ -18,21 +14,15 @@
                :value "24"}
               {:key   16
                :value "16"}]}
-   {:label   "Type:"
-    :key     :type
+   {:key     :type
     :type    :select
-    :options [{:key   :user
-               :value "User"}
-              {:key   :photo
-               :value "Photo"}
-              {:key   :network
-               :value "Network"}]}
-   {:label   "List Size"
-    :key     :list-size
+    :options [{:key :user}
+              {:key :photo}
+              {:key :network}]}
+   {:key     :list-size
     :default 10
     :type    :text}])
 
-;; Mocked list items
 (def user-list
   [{:full-name "ABC DEF"}
    {:full-name "GHI JKL"}
@@ -52,33 +42,17 @@
    {:source (quo.resources/get-network :optimism)}
    {:source (quo.resources/get-network :arbitrum)}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:type               :user
                              :size               32
                              :list-size          10
-                             :more-than-99-label (i18n/label :counter-99-plus)})
+                             :more-than-99-label "99+"})
         type  (reagent/cursor state [:type])]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo2/preview-list @state
-          (case @type
-            :user    user-list
-            :photo   photos-list
-            :network networks-list)]]]])))
-
-(defn preview-preview-lists
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/preview-list @state
+        (case @type
+          :user    user-list
+          :photo   photos-list
+          :network networks-list)]])))

src/status_im2/contexts/quo_preview/main.cljs

@@ -62,6 +62,7 @@
     [status-im2.contexts.quo-preview.links.link-preview :as link-preview]
     [status-im2.contexts.quo-preview.list-items.account-list-card :as account-list-card]
     [status-im2.contexts.quo-preview.list-items.channel :as channel]
+    [status-im2.contexts.quo-preview.list-items.dapp :as dapp]
     [status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
     [status-im2.contexts.quo-preview.list-items.user-list :as user-list]
     [status-im2.contexts.quo-preview.list-items.community-list :as community-list]
@@ -111,8 +112,8 @@
     [status-im2.contexts.quo-preview.loaders.skeleton :as skeleton]
     [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]
     [status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover]
-    [status-im2.contexts.quo-preview.wallet.account-overview :as account-overview]
     [status-im2.contexts.quo-preview.wallet.account-card :as account-card]
+    [status-im2.contexts.quo-preview.wallet.account-overview :as account-overview]
     [status-im2.contexts.quo-preview.wallet.keypair :as keypair]
     [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
     [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge]
@@ -125,107 +126,107 @@
 
 (def screens-categories
   {:foundations       [{:name      :shadows
-                        :component shadows/preview-shadows}]
+                        :component shadows/view}]
    :animated-list     [{:name      :animated-header-list
                         :component animated-header-list/mock-screen}]
    :avatar            [{:name      :group-avatar
-                        :component group-avatar/preview-group-avatar}
+                        :component group-avatar/view}
                        {:name      :icon-avatar
-                        :component icon-avatar/preview-icon-avatar}
+                        :component icon-avatar/view}
                        {:name      :user-avatar
-                        :component user-avatar/preview-user-avatar}
+                        :component user-avatar/view}
                        {:name      :wallet-user-avatar
-                        :component wallet-user-avatar/preview-wallet-user-avatar}
+                        :component wallet-user-avatar/view}
                        {:name      :channel-avatar
-                        :component channel-avatar/preview-channel-avatar}
+                        :component channel-avatar/view}
                        {:name      :account-avatar
-                        :component account-avatar/preview-account-avatar}]
+                        :component account-avatar/view}]
    :banner            [{:name      :banner
-                        :component banner/preview-banner}]
+                        :component banner/view}]
    :buttons           [{:name      :button
-                        :component button/preview-button}
+                        :component button/view}
                        {:name      :composer-button
-                        :component composer-button/preview-composer-button}
+                        :component composer-button/view}
                        {:name      :dynamic-button
-                        :component dynamic-button/preview-dynamic-button}
+                        :component dynamic-button/view}
                        {:name      :slide-button
-                        :component slide-button/preview-slide-button}
+                        :component slide-button/view}
                        {:name      :predictive-keyboard
-                        :component predictive-keyboard/preview-predictive-keyboard}
+                        :component predictive-keyboard/view}
                        {:name      :wallet-button
-                        :component wallet-button/preview}
+                        :component wallet-button/view}
                        {:name      :wallet-ctas
-                        :component wallet-ctas/preview}]
+                        :component wallet-ctas/view}]
    :browser           [{:name      :browser-input
                         :component browser-input/preview-browser-input}]
    :calendar          [{:name      :calendar
-                        :component calendar/preview-calendar}
+                        :component calendar/view}
                        {:name      :calendar-day
-                        :component calendar-day/preview-calendar-day}
+                        :component calendar-day/view}
                        {:name      :calendar-year
-                        :component calendar-year/preview-calendar-year}]
+                        :component calendar-year/view}]
    :code              [{:name      :snippet
-                        :component code-snippet/preview-code-snippet}]
+                        :component code-snippet/view}]
    :colors            [{:name      :color-picker
                         :component color-picker/view}]
    :community         [{:name      :community-card-view
-                        :component community-card/preview-community-card}
+                        :component community-card/view}
                        {:name      :community-membership-list-view
-                        :component community-membership-list-view/preview-community-list-view}
+                        :component community-membership-list-view/view}
                        {:name      :discover-card
-                        :component discover-card/preview-discoverd-card}
+                        :component discover-card/view}
                        {:name      :token-gating
                         :options   {:insets {:bottom? true}}
-                        :component token-gating/preview-token-gating}
+                        :component token-gating/view}
                        {:name      :channel-actions
                         :options   {:insets {:bottom? true}}
-                        :component channel-actions/preview-channel-actions}]
+                        :component channel-actions/view}]
    :counter           [{:name      :counter
-                        :component counter/preview-counter}
+                        :component counter/view}
                        {:name      :step
-                        :component step/preview-step}]
+                        :component step/view}]
    :dividers          [{:name      :divider-label
                         :component divider-label/view}
                        {:name      :new-messages
-                        :component new-messages/preview-new-messages}
+                        :component new-messages/view}
                        {:name      :divider-date
-                        :component divider-date/preview-divider-date}
+                        :component divider-date/view}
                        {:name      :strength-divider
-                        :component strength-divider/preview-strength-divider}]
+                        :component strength-divider/view}]
    :drawers           [{:name      :action-drawers
-                        :component action-drawers/preview-action-drawers}
+                        :component action-drawers/view}
                        {:name      :documentation-drawer
-                        :component documenation-drawers/preview-documenation-drawers}
+                        :component documenation-drawers/view}
                        {:name      :drawer-buttons
-                        :component drawer-buttons/preview-drawer-buttons}
+                        :component drawer-buttons/view}
                        {:name      :permission-drawers
-                        :component permission-drawers/preview-permission-drawers}]
+                        :component permission-drawers/view}]
    :dropdowns         [{:name      :dropdown
-                        :component dropdown/preview-dropdown}
+                        :component dropdown/view}
                        {:name      :network-dropdown
-                        :component network-dropdown/preview-dropdown}]
+                        :component network-dropdown/view}]
    :empty-state       [{:name      :empty-state
-                        :component empty-state/preview-empty-state}]
+                        :component empty-state/view}]
    :gradient          [{:name      :gradient-cover
-                        :component gradient-cover/preview-gradient-cover}]
+                        :component gradient-cover/view}]
    :graph             [{:name      :wallet-graph
-                        :component wallet-graph/preview-wallet-graph}]
+                        :component wallet-graph/view}]
    :info              [{:name      :info-message
-                        :component info-message/preview-info-message}
+                        :component info-message/view}
                        {:name      :information-box
-                        :component information-box/preview-information-box}]
+                        :component information-box/view}]
    :inputs            [{:name      :input
-                        :component input/preview-input}
+                        :component input/view}
                        {:name      :locked-input
-                        :component locked-input/preview-locked-input}
+                        :component locked-input/view}
                        {:name      :profile-input
-                        :component profile-input/preview-profile-input}
+                        :component profile-input/view}
                        {:name      :recovery-phrase-input
-                        :component recovery-phrase-input/preview-recovery-phrase-input}
+                        :component recovery-phrase-input/view}
                        {:name      :search-input
-                        :component search-input/preview-search-input}
+                        :component search-input/view}
                        {:name      :title-input
-                        :component title-input/preview-title-input}]
+                        :component title-input/view}]
    :numbered-keyboard [{:name      :keyboard-key
                         :options   {:insets {:top? true}}
                         :component keyboard-key/preview-keyboard-key}
@@ -242,14 +243,16 @@
                         :options   {:insets {:top? true}}
                         :component link-preview/view}]
    :list-items        [{:name      :account-list-card
-                        :component account-list-card/preview}
+                        :component account-list-card/view}
                        {:name      :channel
-                        :component channel/preview-channel}
+                        :component channel/view}
                        {:name      :community-list
                         :options   {:insets {:top? true}}
                         :component community-list/view}
+                       {:name      :dapp
+                        :component dapp/preview}
                        {:name      :preview-lists
-                        :component preview-lists/preview-preview-lists}
+                        :component preview-lists/view}
                        {:name      :user-list
                         :component user-list/preview-user-list}
                        {:name      :token-value
@@ -360,7 +363,7 @@
                        {:name      :wallet-overview
                         :component wallet-overview/preview-wallet-overview}]
    :keycard           [{:name      :keycard-component
-                        :component keycard/preview-keycard}]})
+                        :component keycard/view}]})
 
 (defn- navigation-bar
   []

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

@@ -4,8 +4,7 @@
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]
-            [utils.address :as address]))
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
   [{:label "Primary name"
@@ -36,8 +35,6 @@
   []
   (let [state (reagent/atom {:primary-name    "Alisher Yakupov"
                              :seconadary-name ""
-                             :short-chat-key  (address/get-shortened-compressed-key
-                                               "zQ3ssgRy5TtB47MMiMKMKaGyaawkCgMqqbrnAUYrZJ1sgt5N")
                              :time-str        "09:30"
                              :contact?        false
                              :verified?       false

src/status_im2/contexts/quo_preview/preview.cljs

@@ -139,15 +139,15 @@
         "Close"]]]]]])
 
 (defn- customizer-select-button
-  [{:keys [open selected-key]}]
+  [{:keys [open selected-option]}]
   [rn/pressable
    {:style    (style/select-container)
     :on-press #(reset! open true)}
    [rn/text
     {:style           (style/field-select)
      :number-of-lines 1}
-    (if selected-key
-      (humanize selected-key)
+    (if selected-option
+      (or (:value selected-option) (humanize (:key selected-option)))
       "Select option")]
    [rn/view
     [quo/icon :i/chevron-right]]])
@@ -156,9 +156,9 @@
   []
   (let [open (reagent/atom nil)]
     (fn [{:keys [label state options] :as args}]
-      (let [label        (or label (key->text-label (:key args)))
-            field-value  (reagent/cursor state [(:key args)])
-            selected-key (:key (find-selected-option @field-value options))]
+      (let [label           (or label (key->text-label (:key args)))
+            field-value     (reagent/cursor state [(:key args)])
+            selected-option (find-selected-option @field-value options)]
         [rn/view {:style style/field-row}
          [label-view state label]
          [rn/view {:style style/field-column}
@@ -166,7 +166,7 @@
            {:open        open
             :options     options
             :field-value field-value}]
-          [customizer-select-button {:open open :selected-key selected-key}]]]))))
+          [customizer-select-button {:open open :selected-option selected-option}]]]))))
 
 (defn customizer
   [state descriptors]
@@ -189,8 +189,7 @@
   ([]
    (customization-color-option {}))
   ([opts]
-   (merge {:label   "Custom color:"
-           :key     :customization-color
+   (merge {:key     :customization-color
            :type    :select
            :options (->> colors/customization
                          keys
@@ -200,7 +199,7 @@
           opts)))
 
 (defn blur-view
-  [{:keys [show-blur-background? image height blur-view-props style]} children]
+  [{:keys [show-blur-background? image height blur-view-props style]} & children]
   [rn/view
    {:style {:flex             1
             :padding-vertical 16}}
@@ -221,39 +220,39 @@
                :blur-amount   10
                :overlay-color (colors/theme-colors colors/white-opa-70 colors/neutral-80-opa-80)}
               blur-view-props)]])
-   [rn/view
-    {:style (merge {:position           :absolute
-                    :top                32
-                    :padding-horizontal 16}
-                   style)}
-    children]])
+   (into [rn/view
+          {:style (merge {:position           :absolute
+                          :top                32
+                          :padding-horizontal 16}
+                         style)}]
+         children)])
 
 (defn preview-container
   [{:keys [state descriptor blur?
            component-container-style
            blur-container-style blur-view-props blur-height show-blur-background?]
     :or   {blur-height 200}}
-   component]
+   & children]
   [rn/scroll-view
    {:style                           (style/panel-basic)
     :shows-vertical-scroll-indicator false}
    [rn/pressable {:on-press rn/dismiss-keyboard!}
-    [rn/view {:style style/customizer-container}
-     [customizer state descriptor]]
-    [rn/view
-     (merge {:style style/component-container}
-            component-container-style)
-     (if blur?
-       [blur-view
-        {:show-blur-background? show-blur-background?
-         :height                blur-height
-         :style                 (merge {:width     "100%"
-                                        :flex-grow 1}
-                                       (when-not show-blur-background?
-                                         {:padding-horizontal 0
-                                          :top                0})
-                                       blur-container-style)
-         :blur-view-props       (merge {:blur-type (quo.theme/get-theme)}
-                                       blur-view-props)}
-        component]
-       component)]]])
+    (when descriptor
+      [rn/view {:style style/customizer-container}
+       [customizer state descriptor]])
+    (if blur?
+      [rn/view {:style (merge style/component-container component-container-style)}
+       (into [blur-view
+              {:show-blur-background? show-blur-background?
+               :height                blur-height
+               :style                 (merge {:width     "100%"
+                                              :flex-grow 1}
+                                             (when-not show-blur-background?
+                                               {:padding-horizontal 0
+                                                :top                0})
+                                             blur-container-style)
+               :blur-view-props       (merge {:blur-type (quo.theme/get-theme)}
+                                             blur-view-props)}]
+             children)]
+      (into [rn/view {:style (merge style/component-container component-container-style)}]
+            children))]])

src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs

@@ -101,8 +101,7 @@
   [rn/view {:style style/notification-container}
    (if (= notification-indicator :counter)
      [quo/counter
-      {:outline             false
-       :customization-color customization-color}
+      {:customization-color customization-color}
       counter-label]
      [rn/view {:style (style/unread-dot customization-color)}])])
 

src/status_im2/contexts/syncing/setup_syncing/view.cljs

@@ -131,9 +131,7 @@
                :icon-left       :i/copy}
               (i18n/label :t/copy-qr)]])]]
         [rn/view {:style style/sync-code}
-         [quo/divider-label
-          {:label                 (i18n/label :t/have-a-sync-code?)
-           :increase-padding-top? true}]
+         [quo/divider-label {:tight? false} (i18n/label :t/have-a-sync-code?)]
          [quo/action-drawer
           [[{:icon     :i/scan
              :on-press #(rf/dispatch [:navigate-to :scan-sync-code-page])

src/status_im2/contexts/wallet/account/style.cljs

@@ -0,0 +1,15 @@
+(ns status-im2.contexts.wallet.account.style)
+
+(def tabs
+  {:padding-left     20
+   :padding-vertical 12})
+
+(def wip
+  {:justify-content :center
+   :align-items     :center
+   :flex            1})
+
+(def empty-container-style
+  {:justify-content :center
+   :flex            1
+   :margin-bottom   44})

src/status_im2/contexts/wallet/account/tabs/view.cljs

@@ -0,0 +1,37 @@
+(ns status-im2.contexts.wallet.account.tabs.view
+  (:require
+    [quo2.core :as quo]
+    [react-native.core :as rn]
+    [status-im2.contexts.wallet.account.style :as style]
+    [status-im2.contexts.wallet.common.temp :as temp]
+    [utils.i18n :as i18n]))
+
+(defn view
+  [selected-tab]
+  (case selected-tab
+    :assets       [rn/flat-list
+                   {:render-fn               quo/token-value
+                    :data                    temp/tokens
+                    :content-container-style {:padding-horizontal 8}}]
+    :collectibles [quo/empty-state
+                   {:title           (i18n/label :t/no-collectibles)
+                    :description     (i18n/label :t/no-collectibles-description)
+                    :placeholder?    true
+                    :container-style style/empty-container-style}]
+    :activity     [quo/empty-state
+                   {:title           (i18n/label :t/no-activity)
+                    :description     (i18n/label :t/empty-tab-description)
+                    :placeholder?    true
+                    :container-style style/empty-container-style}]
+    :permissions  [quo/empty-state
+                   {:title           (i18n/label :t/no-permissions)
+                    :description     (i18n/label :t/no-collectibles-description)
+                    :placeholder?    true
+                    :container-style style/empty-container-style}]
+    :dapps        [quo/empty-state
+                   {:title           (i18n/label :t/no-dapps)
+                    :description     (i18n/label :t/no-collectibles-description)
+                    :placeholder?    true
+                    :container-style style/empty-container-style}]
+    [rn/view {:style style/wip}
+     [quo/text "[WIP]"]]))

src/status_im2/contexts/wallet/account/view.cljs

@@ -1,15 +1,47 @@
 (ns status-im2.contexts.wallet.account.view
   (:require [react-native.core :as rn]
             [quo2.core :as quo]
-            [utils.re-frame :as rf]))
+            [react-native.safe-area :as safe-area]
+            [reagent.core :as reagent]
+            [status-im2.contexts.wallet.common.temp :as temp]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]
+            [status-im2.contexts.wallet.account.style :as style]
+            [status-im2.contexts.wallet.account.tabs.view :as tabs]))
+
+(def tabs-data
+  [{:id :assets :label (i18n/label :t/assets) :accessibility-label :assets-tab}
+   {:id :collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab}
+   {:id :activity :label (i18n/label :t/activity) :accessibility-label :activity-tab}
+   {:id :permissions :label (i18n/label :t/permissions) :accessibility-label :permissions}
+   {:id :dapps :label (i18n/label :t/dapps) :accessibility-label :dapps}
+   {:id :about :label (i18n/label :t/about) :accessibility-label :about}])
 
 (defn view
   []
-  [rn/view
-   {:style {:flex            1
-            :align-items     :center
-            :justify-content :center}}
-   [quo/text {} "ACCOUNTS PAGE"]
-   [quo/divider-label]
-   [quo/button {:on-press #(rf/dispatch [:navigate-back])}
-    "NAVIGATE BACK"]])
+  (let [top          (safe-area/get-top)
+        selected-tab (reagent/atom (:id (first tabs-data)))]
+    (fn []
+      [rn/view
+       {:style {:flex       1
+                :margin-top top}}
+       [quo/page-nav
+        {:align-mid?            true
+         :mid-section           {:type :text-only :main-text ""}
+         :left-section          {:type     :grey
+                                 :icon     :i/close
+                                 :on-press #(rf/dispatch [:navigate-back])}
+         :right-section-buttons [{:type     :grey
+                                  :label    "[WIP]"
+                                  :on-press #(rf/dispatch [:open-modal :how-to-pair])}]}]
+       [quo/account-overview temp/account-overview-state]
+       [quo/wallet-graph {:time-frame :empty}]
+       [quo/wallet-ctas]
+       [quo/tabs
+        {:style          style/tabs
+         :size           32
+         :default-active @selected-tab
+         :data           tabs-data
+         :on-change      #(reset! selected-tab %)
+         :scrollable?    true}]
+       [tabs/view @selected-tab]])))

src/status_im2/contexts/wallet/common/temp.cljs

@@ -1,4 +1,4 @@
-(ns status-im2.contexts.wallet.home.temp
+(ns status-im2.contexts.wallet.common.temp
   (:require [quo2.core :as quo]
             [react-native.core :as rn]
             [utils.re-frame :as rf]))
@@ -36,7 +36,8 @@
     :percentage-value    "€0.00"
     :customization-color :blue
     :type                :empty
-    :emoji               "🍑"}
+    :emoji               "🍑"
+    :on-press            #(rf/dispatch [:navigate-to :wallet-accounts])}
    {:customization-color :blue
     :on-press            #(js/alert "Button pressed")
     :type                :add-account}])
@@ -66,3 +67,9 @@
                           :fiat-value        "€0.00"
                           :percentage-change "0.00"
                           :fiat-change       "€0.00"}}])
+
+(def account-overview-state
+  {:current-value       "€0.00"
+   :account-name        "Account 1"
+   :account             :default
+   :customization-color :blue})

src/status_im2/contexts/wallet/home/style.cljs

@@ -1,24 +1,17 @@
-(ns status-im2.contexts.wallet.home.style
-  (:require [quo2.foundations.colors :as colors]))
+(ns status-im2.contexts.wallet.home.style)
 
 (def tabs
   {:padding-horizontal 20
    :padding-top        8
    :padding-bottom     12})
 
-(def empty-container
-  {:justify-content :center
-   :align-items     :center
-   :margin-bottom   44
-   :flex            1})
-
-(def image-placeholder
-  {:width            80
-   :height           80
-   :background-color colors/danger})
-
 (def accounts-list
   {:padding-horizontal 20
    :padding-top        32
    :padding-bottom     12
    :max-height         112})
+
+(def empty-container-style
+  {:justify-content :center
+   :flex            1
+   :margin-bottom   44})

src/status_im2/contexts/wallet/home/view.cljs

@@ -8,27 +8,13 @@
     [status-im2.contexts.wallet.home.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]
-    [status-im2.contexts.wallet.home.temp :as temp]))
+    [status-im2.contexts.wallet.common.temp :as temp]))
 
 (def tabs-data
   [{:id :assets :label (i18n/label :t/assets) :accessibility-label :assets-tab}
    {:id :collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab}
    {:id :activity :label (i18n/label :t/activity) :accessibility-label :activity-tab}])
 
-(defn collectibles
-  []
-  [rn/view {:style style/empty-container}
-   [rn/view {:style style/image-placeholder}]
-   [quo/text {:weight :semi-bold :style {:margin-top 12}} (i18n/label :t/no-collectibles)]
-   [quo/text {:size :paragraph-2 :style {:margin-top 2}} (i18n/label :t/no-collectibles-description)]])
-
-(defn activity
-  []
-  [rn/view {:style style/empty-container}
-   [rn/view {:style style/image-placeholder}]
-   [quo/text {:weight :semi-bold :style {:margin-top 12}} (i18n/label :t/no-activity)]
-   [quo/text {:size :paragraph-2 :style {:margin-top 2}} (i18n/label :t/no-activity-description)]])
-
 (defn view
   []
   (let [top          (safe-area/get-top)
@@ -59,5 +45,13 @@
                         {:render-fn               quo/token-value
                          :data                    temp/tokens
                          :content-container-style {:padding-horizontal 8}}]
-         :collectibles [collectibles]
-         [activity])])))
+         :collectibles [quo/empty-state
+                        {:title           (i18n/label :t/no-collectibles)
+                         :description     (i18n/label :t/no-collectibles-description)
+                         :placeholder?    true
+                         :container-style style/empty-container-style}]
+         [quo/empty-state
+          {:title           (i18n/label :t/no-activity)
+           :description     (i18n/label :t/empty-tab-description)
+           :placeholder?    true
+           :container-style style/empty-container-style}])])))

test/appium/tests/critical/chats/test_1_1_public_chats.py

@@ -51,7 +51,7 @@ class TestCommandsMultipleDevicesMerged(MultipleSharedDeviceTestCase):
             self.drivers[0].fail('No message is shown after sending ETH in 1-1 chat for sender')
         sender_message.transaction_status.wait_for_element_text(sender_message.address_requested)
 
-        chat_2 = self.home_2.get_chat(self.sender['username']).click()
+        chat_2 = self.home_2.get_one_to_one_chat(self.sender['username']).click()
         receiver_message = chat_2.get_incoming_transaction(self.account_name_1)
         timestamp_sender = sender_message.timestamp_command_message.text
         if not receiver_message.is_element_displayed():
@@ -101,7 +101,7 @@ class TestCommandsMultipleDevicesMerged(MultipleSharedDeviceTestCase):
         self.wallet_2.wait_balance_is_changed()
         self.wallet_2.find_transaction_in_history(amount=amount)
         self.wallet_2.home_button.click()
-        self.home_2.get_chat(self.sender['username']).click()
+        self.home_2.get_one_to_one_chat(self.sender['username']).click()
         [message.transaction_status.wait_for_element_text(message.confirmed, 60) for message in
          (sender_message, receiver_message)]
 
@@ -112,7 +112,7 @@ class TestCommandsMultipleDevicesMerged(MultipleSharedDeviceTestCase):
     def test_1_1_chat_command_decline_eth_push_changing_state(self):
         [home.driver.background_app(3) for home in (self.home_1, self.home_2)]
         self.home_1.home_button.double_click()
-        self.home_1.get_chat(username=self.recipient_username).click()
+        self.home_1.get_one_to_one_chat(username=self.recipient_username).click()
 
         self.home_1.just_fyi('Decline transaction before sharing address and check that state is changed')
         self.chat_1.commands_button.click()
@@ -125,7 +125,7 @@ class TestCommandsMultipleDevicesMerged(MultipleSharedDeviceTestCase):
         self.home_1.click_system_home_button()
 
         self.home_2.home_button.double_click()
-        chat_2 = self.home_2.get_chat(self.sender['username']).click()
+        chat_2 = self.home_2.get_one_to_one_chat(self.sender['username']).click()
         chat_2_receiver_message = chat_2.get_incoming_transaction()
         chat_2_receiver_message.decline_transaction.click()
         self.home_1.open_notification_bar()
@@ -165,7 +165,7 @@ class TestCommandsMultipleDevicesMerged(MultipleSharedDeviceTestCase):
         self.home_1.driver.close_app()
 
         self.home_2.just_fyi('Request %s STT in 1-1 chat and check it is visible for sender and receiver' % amount)
-        chat_2 = self.home_2.get_chat(username=self.sender['username']).click()
+        chat_2 = self.home_2.get_one_to_one_chat(username=self.sender['username']).click()
         chat_2.commands_button.click()
         request_transaction = chat_2.request_command.click()
         request_transaction.amount_edit_box.set_value(amount)
@@ -182,7 +182,7 @@ class TestCommandsMultipleDevicesMerged(MultipleSharedDeviceTestCase):
         self.device_1.driver.launch_app()
         self.device_1.sign_in()
         self.home_1.connection_offline_icon.wait_for_invisibility_of_element(30)
-        self.home_1.get_chat(self.recipient_username).click()
+        self.home_1.get_one_to_one_chat(self.recipient_username).click()
         chat_1_sender_message = self.chat_1.get_outgoing_transaction()
         if not chat_1_sender_message.is_element_displayed():
             self.drivers[0].fail('No outgoing transaction in 1-1 chat is shown for sender after requesting STT')
@@ -198,8 +198,8 @@ class TestCommandsMultipleDevicesMerged(MultipleSharedDeviceTestCase):
             home.toggle_airplane_mode()
             home.home_button.double_click()
             home.connection_offline_icon.wait_for_invisibility_of_element(100)
-        self.home_2.get_chat(self.sender['username']).click()
-        self.home_1.get_chat(self.recipient_username).click()
+        self.home_2.get_one_to_one_chat(self.sender['username']).click()
+        self.home_1.get_one_to_one_chat(self.recipient_username).click()
         [message.transaction_status.wait_for_element_text(message.confirmed, wait_time=120) for message in
          (chat_1_sender_message, chat_2_request_message)]
 
@@ -227,7 +227,7 @@ class TestOneToOneChatMultipleSharedDevices(MultipleSharedDeviceTestCase):
         self.chat_1 = self.home_1.add_contact(self.public_key_2)
         self.chat_1.send_message('hey')
         self.home_2.home_button.double_click()
-        self.chat_2 = self.home_2.get_chat(self.default_username_1).click()
+        self.chat_2 = self.home_2.get_one_to_one_chat(self.default_username_1).click()
 
     @marks.testrail_id(6316)
     def test_1_1_chat_audio_message_with_push(self):
@@ -250,7 +250,7 @@ class TestOneToOneChatMultipleSharedDevices(MultipleSharedDeviceTestCase):
         listen_time = 5
 
         self.device_2.home_button.click()
-        self.home_2.get_chat(self.default_username_1).click()
+        self.home_2.get_one_to_one_chat(self.default_username_1).click()
         chat_2.play_audio_message(listen_time)
         if chat_2.audio_message_in_chat_timer.text not in ("00:05", "00:06", "00:07", "00:08"):
             self.errors.append("Listened 5 seconds but timer shows different listened time in audio message")
@@ -262,16 +262,16 @@ class TestOneToOneChatMultipleSharedDevices(MultipleSharedDeviceTestCase):
     def test_1_1_chat_delete_via_delete_button_relogin(self):
         self.home_1.driver.quit()
         self.home_2.home_button.click()
-        self.home_2.get_chat(username=self.default_username_1).click()
+        self.home_2.get_one_to_one_chat(username=self.default_username_1).click()
 
         self.home_2.just_fyi("Deleting chat via delete button and check it will not reappear after relaunching app")
         self.chat_2.delete_chat()
         self.chat_2.get_back_to_home_view()
 
-        if self.home_2.get_chat_from_home_view(self.default_username_1).is_element_displayed():
+        if self.home_2.get_one_to_one_chat(self.default_username_1).is_element_displayed():
             self.errors.append('Deleted %s chat is shown, but the chat has been deleted' % self.default_username_1)
         self.home_2.reopen_app()
-        if self.home_2.get_chat_from_home_view(self.default_username_1).is_element_displayed():
+        if self.home_2.get_one_to_one_chat(self.default_username_1).is_element_displayed():
             self.errors.append(
                 'Deleted chat %s is shown after re-login, but the chat has been deleted' % self.default_username_1)
         self.errors.verify_no_errors()
@@ -310,7 +310,7 @@ class TestContactBlockMigrateKeycardMultipleSharedDevices(MultipleSharedDeviceTe
 
     @marks.testrail_id(702186)
     def test_keycard_command_send_tx_eth_1_1_chat(self):
-        self.home_2.get_chat(self.sender['username']).click()
+        self.home_2.get_one_to_one_chat(self.sender['username']).click()
         self.chat_2.send_message("hey on kk!")
         self.chat_2.home_button.click()
 
@@ -318,7 +318,7 @@ class TestContactBlockMigrateKeycardMultipleSharedDevices(MultipleSharedDeviceTe
         account_name = self.chat_1.status_account_name
 
         self.chat_1.just_fyi('Send %s ETH in 1-1 chat and check it for sender and receiver: Address requested' % amount)
-        self.home_1.get_chat(self.nick).click()
+        self.home_1.get_one_to_one_chat(self.nick).click()
         self.chat_1.send_message("hello again!")
         self.chat_1.commands_button.click()
         send_transaction = self.chat_1.send_command.click()
@@ -333,7 +333,7 @@ class TestContactBlockMigrateKeycardMultipleSharedDevices(MultipleSharedDeviceTe
             self.chat_1.driver.fail('No message is shown after sending ETH in 1-1 chat for sender')
         sender_message.transaction_status.wait_for_element_text(sender_message.address_requested)
 
-        self.home_2.get_chat(self.sender['username']).click()
+        self.home_2.get_one_to_one_chat(self.sender['username']).click()
         receiver_message = self.chat_2.get_incoming_transaction()
         timestamp_sender = sender_message.timestamp_command_message.text
         if not receiver_message.is_element_displayed(30):
@@ -378,7 +378,7 @@ class TestContactBlockMigrateKeycardMultipleSharedDevices(MultipleSharedDeviceTe
     def test_contact_add_remove_mention_default_username_nickname_public_chat(self):
         [home.home_button.double_click() for home in [self.home_1, self.home_2]]
         self.chat_1.just_fyi('check that can mention user with 3-random name in public chat')
-        self.home_1.get_chat('#%s' % self.pub_chat_name).click()
+        self.home_1.get_one_to_one_chat('#%s' % self.pub_chat_name).click()
 
         self.chat_1.just_fyi('Set nickname for user without adding him to contacts, check it in public chat')
         chat_element = self.chat_1.chat_element_by_text(self.message)
@@ -495,7 +495,7 @@ class TestContactBlockMigrateKeycardMultipleSharedDevices(MultipleSharedDeviceTe
             self.errors.append("Not connected to history node after enabling fetching on mobile data")
         self.home_2.click_system_back_button()
         self.home_2.mobile_connection_on_icon.wait_for_visibility_of_element(10)
-        self.home_2.get_chat('#%s' % public_chat_name).click()
+        self.home_2.get_one_to_one_chat('#%s' % public_chat_name).click()
         if not public_2.chat_element_by_text(public_chat_message).is_element_displayed(180):
             self.errors.append("Chat history was not fetched with mobile data fetching ON")
 
@@ -560,7 +560,7 @@ class TestContactBlockMigrateKeycardMultipleSharedDevices(MultipleSharedDeviceTe
         self.home_2.home_button.wait_for_element(30)
         if not self.home_2.element_by_text_part(self.pub_chat_name).is_element_displayed():
             self.errors.append("Public chat was removed from home after migration to kk")
-        self.home_2.get_chat(self.sender['username']).click()
+        self.home_2.get_one_to_one_chat(self.sender['username']).click()
         if self.chat_2.add_to_contacts.is_element_displayed():
             self.errors.append("User was removed from contacts after migration to kk")
         self.errors.verify_no_errors()
@@ -622,7 +622,7 @@ class TestEnsStickersMultipleDevicesMerged(MultipleSharedDeviceTestCase):
         wallet_1 = self.home_1.wallet_button.click()
         wallet_1.wait_balance_is_changed()
         wallet_1.home_button.click()
-        self.home_1.get_chat(self.ens).click()
+        self.home_1.get_one_to_one_chat(self.ens).click()
         self.chat_1.commands_button.click()
         amount = self.chat_1.get_unique_amount()
 
@@ -641,7 +641,7 @@ class TestEnsStickersMultipleDevicesMerged(MultipleSharedDeviceTestCase):
         chat_1_sender_message.transaction_status.wait_for_element_text(chat_1_sender_message.confirmed)
 
         self.chat_2.just_fyi("Check that message is fetched for receiver")
-        self.home_2.get_chat(self.sender['username']).click()
+        self.home_2.get_one_to_one_chat(self.sender['username']).click()
         chat_2_reciever_message = self.chat_2.get_incoming_transaction(transaction_value=amount)
         chat_2_reciever_message.transaction_status.wait_for_element_text(chat_2_reciever_message.confirmed,
                                                                          wait_time=60)
@@ -652,7 +652,7 @@ class TestEnsStickersMultipleDevicesMerged(MultipleSharedDeviceTestCase):
 
         self.home_1.just_fyi('Mention user by ENS in 1-1 chat')
         message, message_ens_owner = '%s hey!' % self.ens, '%s hey!' % self.reciever['ens']
-        self.home_1.get_chat(self.ens).click()
+        self.home_1.get_one_to_one_chat(self.ens).click()
         self.chat_1.send_message(message)
 
         self.home_1.just_fyi('Set nickname and mention user by nickname in 1-1 chat')
@@ -667,7 +667,7 @@ class TestEnsStickersMultipleDevicesMerged(MultipleSharedDeviceTestCase):
         self.chat_1.home_button.double_click()
         if not self.chat_1.element_by_text(updated_message).is_element_displayed():
             self.errors.append('"%s" is not show in chat preview on home screen!' % message)
-        self.home_1.get_chat(russian_nickname).click()
+        self.home_1.get_one_to_one_chat(russian_nickname).click()
 
         self.chat_1.just_fyi('Check redirect to user profile on mention by nickname tap')
         self.chat_1.chat_element_by_text(updated_message).click()
@@ -678,7 +678,7 @@ class TestEnsStickersMultipleDevicesMerged(MultipleSharedDeviceTestCase):
             self.chat_1.profile_send_message_button.click()
 
         self.chat_2.just_fyi("Check message with mention for ENS owner")
-        self.home_2.get_chat(self.sender['username']).click()
+        self.home_2.get_one_to_one_chat(self.sender['username']).click()
         if not self.chat_2.chat_element_by_text(message_ens_owner).is_element_displayed():
             self.errors.append('Expected %s message is not shown for ENS owner' % message_ens_owner)
 
@@ -745,7 +745,7 @@ class TestEnsStickersMultipleDevicesMerged(MultipleSharedDeviceTestCase):
         profile_2.switch_network('Goerli with upstream RPC')
 
         self.home_1.just_fyi('Install free sticker pack and use it in 1-1 chat on Goerli')
-        self.home_1.get_chat(self.ens).click()
+        self.home_1.get_one_to_one_chat(self.ens).click()
         self.chat_1.chat_message_input.clear()
         self.chat_1.install_sticker_pack_by_name()
         self.chat_1.sticker_icon.click()
@@ -766,7 +766,7 @@ class TestEnsStickersMultipleDevicesMerged(MultipleSharedDeviceTestCase):
         # self.home_2.just_fyi('Check that can install stickers by tapping on sticker message')
         # TODO: disabled because of #13683 (rechecked 04.10.22, valid)
         self.home_2.home_button.double_click()
-        self.home_2.get_chat(self.sender['username']).click()
+        self.home_2.get_one_to_one_chat(self.sender['username']).click()
         # self.chat_2.chat_item.click()
         # self.chat_2.element_by_text_part('Free').wait_and_click(40)
         # if self.chat_2.element_by_text_part('Free').is_element_displayed():
@@ -853,10 +853,10 @@ class TestOneToOneChatMultipleSharedDevicesNewUi(MultipleSharedDeviceTestCase):
         self.home_2.handle_contact_request(self.username_1)
 
         self.profile_1.just_fyi("Sending message to contact via Messages > Recent")
-        self.chat_1 = self.home_1.get_chat(self.username_2).click()
+        self.chat_1 = self.home_1.get_one_to_one_chat(self.username_2).click()
         self.chat_1.send_message('hey')
         self.home_2.navigate_back_to_home_view()
-        self.chat_2 = self.home_2.get_chat(self.username_1).click()
+        self.chat_2 = self.home_2.get_one_to_one_chat(self.username_1).click()
         self.message_1, self.message_2, self.message_3, self.message_4 = \
             "Message 1", "Message 2", "Message 3", "Message 4"
 
@@ -1120,7 +1120,7 @@ class TestOneToOneChatMultipleSharedDevicesNewUi(MultipleSharedDeviceTestCase):
 
         self.chat_1.just_fyi("Go back to chat view and checking that profile photo is updated")
         if not self.chat_2.chat_message_input.is_element_displayed():
-            self.home_2.get_chat(self.username_1).click()
+            self.home_2.get_one_to_one_chat(self.username_1).click()
         if self.chat_2.chat_element_by_text(message).member_photo.is_element_differs_from_template("member3.png",
                                                                                                    diff=6):
             self.errors.append("Image of user in 1-1 chat is too different from template!")
@@ -1138,7 +1138,7 @@ class TestOneToOneChatMultipleSharedDevicesNewUi(MultipleSharedDeviceTestCase):
         self.device_2.put_app_to_background()
         self.device_2.open_notification_bar()
         if not self.chat_1.chat_message_input.is_element_displayed():
-            self.home_1.get_chat(self.username_2).click()
+            self.home_1.get_one_to_one_chat(self.username_2).click()
         self.chat_1.send_message(message)
 
         self.device_1.just_fyi("Device 1 puts app on background to receive emoji push notification")
@@ -1350,7 +1350,7 @@ class TestOneToOneChatMultipleSharedDevicesNewUi(MultipleSharedDeviceTestCase):
         self.home_2.just_fyi('Device2 checks "Sending" status when sending message from offline')
         if not self.chat_2.chat_message_input.is_element_displayed():
             self.home_2.chats_tab.click()
-            self.home_2.get_chat(self.username_1).click()
+            self.home_2.get_one_to_one_chat(self.username_1).click()
         self.chat_2.send_message(message_1)
         status = self.chat_2.chat_element_by_text(message_1).status
         if not (status == 'Sending' or status == 'Sent'):
@@ -1363,7 +1363,7 @@ class TestOneToOneChatMultipleSharedDevicesNewUi(MultipleSharedDeviceTestCase):
                 home.driver.launch_app()
                 SignInView(home.driver).sign_in()
                 home.chats_tab.click()
-                home.get_chat(self.username_2 if i == 0 else self.username_1).click()
+                home.get_one_to_one_chat(self.username_2 if i == 0 else self.username_1).click()
 
         self.home_1.just_fyi('Device1 goes back online and checks that 1-1 chat will be fetched')
         if not self.chat_1.chat_element_by_text(message_1).is_element_displayed(120):
@@ -1381,11 +1381,11 @@ class TestOneToOneChatMultipleSharedDevicesNewUi(MultipleSharedDeviceTestCase):
         self.home_1.navigate_back_to_home_view()
         self.home_1.chats_tab.click()
         self.home_1.just_fyi("Mute chat")
-        self.home_1.mute_chat_long_press(self.username_2)
+        self.home_1.mute_chat_long_press(self.home_1.get_one_to_one_chat(self.username_2))
 
         muted_message = "should be muted"
         self.chat_2.send_message(muted_message)
-        chat = self.home_1.get_chat(self.username_2)
+        chat = self.home_1.get_one_to_one_chat(self.username_2)
         if chat.new_messages_counter.is_element_displayed(30) or self.home_1.chats_tab.counter.is_element_displayed(10):
             self.errors.append("New messages counter is shown after mute")
         if not chat.chat_preview.text.startswith(muted_message):
@@ -1423,11 +1423,11 @@ class TestOneToOneChatMultipleSharedDevicesNewUi(MultipleSharedDeviceTestCase):
         self.home_2.chats_tab.click()
 
         self.home_2.just_fyi("Deleting chat via delete button and check it will not reappear after relaunching app")
-        self.home_2.delete_chat_long_press(username=self.username_1)
-        if self.home_2.get_chat_from_home_view(self.username_1).is_element_displayed():
+        self.home_2.delete_chat_long_press(self.home_2.get_one_to_one_chat(self.username_1))
+        if self.home_2.get_one_to_one_chat(self.username_1).is_element_displayed():
             self.errors.append('Deleted %s chat is shown, but the chat has been deleted' % self.username_1)
         self.home_2.reopen_app()
-        if self.home_2.get_chat_from_home_view(self.username_1).is_element_displayed(15):
+        if self.home_2.get_one_to_one_chat(self.username_1).is_element_displayed(15):
             self.errors.append(
                 'Deleted chat %s is shown after re-login, but the chat has been deleted' % self.username_1)
         self.errors.verify_no_errors()

test/appium/tests/critical/chats/test_group_chat.py

@@ -62,7 +62,7 @@ class TestGroupChatMultipleDeviceMerged(MultipleSharedDeviceTestCase):
             group_invite_pn.click()
         else:
             self.homes[1].click_system_back_button(2)
-            self.homes[1].get_chat(self.chat_name).click()
+            self.homes[1].get_group_chat(self.chat_name).click()
 
         self.homes[1].just_fyi("Check system messages in group chat for admin and member")
         create_system_message = self.chats[0].create_system_message(self.usernames[0], self.chat_name)
@@ -84,7 +84,7 @@ class TestGroupChatMultipleDeviceMerged(MultipleSharedDeviceTestCase):
     @marks.testrail_id(700732)
     def test_group_chat_add_new_member(self):
         [self.homes[i].home_button.double_click() for i in range(3)]
-        self.homes[0].get_chat(self.chat_name).click()
+        self.homes[0].get_group_chat(self.chat_name).click()
         self.chats[0].add_members_to_group_chat([self.usernames[2]])
 
         self.chats[2].just_fyi("Check there will be PN and no unread in AC for a new member")
@@ -97,10 +97,10 @@ class TestGroupChatMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         self.homes[2].click_system_back_button()
 
         self.homes[2].just_fyi("Check new group appeared in chat list for a new member")
-        if not self.homes[2].get_chat(self.chat_name).is_element_displayed(60):
+        if not self.homes[2].get_group_chat(self.chat_name).is_element_displayed(60):
             self.drivers[2].fail("New group chat hasn't appeared in chat list")
 
-        self.homes[2].get_chat(self.chat_name).click()
+        self.homes[2].get_group_chat(self.chat_name).click()
 
         for message in (self.message_to_admin, self.message_before_adding):
             if self.chats[2].chat_element_by_text(message).is_element_displayed():
@@ -114,10 +114,10 @@ class TestGroupChatMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         self.homes[0].create_group_chat([self.usernames[1]], chat_name)
 
         self.homes[1].just_fyi("Check that new group chat from contact is highlited")
-        chat_2_element = self.homes[1].get_chat(chat_name)
+        chat_2_element = self.homes[1].get_group_chat(chat_name)
         if chat_2_element.no_message_preview.is_element_differs_from_template('highligted_preview_group.png', 0):
             self.errors.append("Preview message is not hightligted or text is not shown! ")
-        chat_2 = self.homes[1].get_chat(chat_name).click()
+        chat_2 = self.homes[1].get_group_chat(chat_name).click()
         chat_2.home_button.click()
         if not chat_2_element.no_message_preview.is_element_differs_from_template('highligted_preview_group.png', 0):
             self.errors.append("Preview message is still hightligted after opening! ")
@@ -128,10 +128,10 @@ class TestGroupChatMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         self.drivers[2].quit()
         [self.homes[i].home_button.double_click() for i in range(2)]
         self.homes[0].home_button.double_click()
-        self.homes[1].get_chat(self.chat_name).click()
+        self.homes[1].get_group_chat(self.chat_name).click()
 
         self.homes[0].just_fyi("Admin deleted chat via long press")
-        self.homes[0].leave_chat_long_press(self.chat_name)
+        self.homes[0].leave_chat_long_press(self.homes[0].get_group_chat(self.chat_name))
 
         self.homes[1].just_fyi('Check that leave system message is presented after user left the group chat')
         if not self.chats[1].chat_element_by_text(left_system_message).is_element_displayed():
@@ -140,7 +140,7 @@ class TestGroupChatMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         self.homes[0].just_fyi("Member sends some message, admin relogins and check chat does not reappear")
         self.chats[1].send_message(self.message_to_admin)
         self.homes[0].relogin()
-        if self.homes[0].get_chat_from_home_view(self.chat_name).is_element_displayed():
+        if self.homes[0].get_one_to_one_chat(self.chat_name).is_element_displayed():
             self.drivers[0].fail('Deleted %s is present after relaunch app' % self.chat_name)
 
 
@@ -210,7 +210,7 @@ class TestGroupChatMultipleDeviceMergedNewUI(MultipleSharedDeviceTestCase):
     def test_group_chat_join_send_text_messages_push(self):
         message_to_admin = self.message_to_admin
         [self.homes[i].navigate_back_to_home_view() for i in range(3)]
-        self.homes[1].get_chat(self.chat_name).click()
+        self.homes[1].get_group_chat(self.chat_name).click()
 
         self.chats[1].send_message(message_to_admin)
 
@@ -222,7 +222,7 @@ class TestGroupChatMultipleDeviceMergedNewUI(MultipleSharedDeviceTestCase):
         else:
             self.errors.append("No PN was received on new message for message in group chat")
             self.homes[0].click_system_back_button()
-            self.homes[0].get_chat(self.chat_name).click()
+            self.homes[0].get_group_chat(self.chat_name).click()
 
         self.chats[1].just_fyi('Check message status and message delivery')
         self.chats[1].chat_element_by_text(message_to_admin).wait_for_status_to_be('Delivered', timeout=120)
@@ -233,7 +233,7 @@ class TestGroupChatMultipleDeviceMergedNewUI(MultipleSharedDeviceTestCase):
     @marks.testrail_id(703202)
     def test_group_chat_reactions(self):
         [self.homes[i].navigate_back_to_home_view() for i in range(3)]
-        [self.homes[i].get_chat(self.chat_name).click() for i in range(3)]
+        [self.homes[i].get_group_chat(self.chat_name).click() for i in range(3)]
         message = "This is a test message to check some reactions."
         self.chats[0].just_fyi("Admin sends a message")
         self.chats[0].send_message(message)
@@ -306,7 +306,7 @@ class TestGroupChatMultipleDeviceMergedNewUI(MultipleSharedDeviceTestCase):
 
         self.chats[0].just_fyi("Admin relogins")
         self.chats[0].reopen_app()
-        self.homes[0].get_chat(self.chat_name).click()
+        self.homes[0].get_group_chat(self.chat_name).click()
 
         self.chats[0].just_fyi("Admin checks reactions count after relogin")
         message_element = self.chats[0].chat_element_by_text(message)
@@ -347,7 +347,7 @@ class TestGroupChatMultipleDeviceMergedNewUI(MultipleSharedDeviceTestCase):
     def test_group_chat_send_image_save_and_share(self):
         [self.homes[i].navigate_back_to_home_view() for i in range(3)]
         for i in range(3):
-            self.homes[i].get_chat(self.chat_name).click()
+            self.homes[i].get_group_chat(self.chat_name).click()
 
         self.chats[1].just_fyi("Member_1 sends an image")
         image_description = "test image"
@@ -407,7 +407,7 @@ class TestGroupChatMultipleDeviceMergedNewUI(MultipleSharedDeviceTestCase):
             self.homes[i].navigate_back_to_home_view()
             self.homes[i].chats_tab.click()
             self.homes[i].groups_tab.click()
-            self.homes[i].get_chat(self.chat_name).click()
+            self.homes[i].get_group_chat(self.chat_name).click()
 
         message_1, message_2 = 'message from old member', 'message from new member'
 
@@ -431,7 +431,7 @@ class TestGroupChatMultipleDeviceMergedNewUI(MultipleSharedDeviceTestCase):
             self.drivers[0].launch_app()
             SignInView(self.drivers[0]).sign_in()
         self.homes[0].chats_tab.click()
-        self.homes[0].get_chat(self.chat_name).click()
+        self.homes[0].get_group_chat(self.chat_name).click()
 
         self.homes[0].just_fyi("check that messages are shown for every member")
         for i in range(3):
@@ -444,7 +444,7 @@ class TestGroupChatMultipleDeviceMergedNewUI(MultipleSharedDeviceTestCase):
     @marks.testrail_id(702732)
     def test_group_chat_pin_messages(self):
         [self.homes[i].navigate_back_to_home_view() for i in range(3)]
-        [self.homes[i].get_chat(self.chat_name).click() for i in range(3)]
+        [self.homes[i].get_group_chat(self.chat_name).click() for i in range(3)]
 
         self.message_1, self.message_2, self.message_3, self.message_4 = \
             "Message 1", "Message 2", "Message 3", "Message 4"
@@ -525,13 +525,13 @@ class TestGroupChatMultipleDeviceMergedNewUI(MultipleSharedDeviceTestCase):
         [self.homes[i].navigate_back_to_home_view() for i in range(3)]
 
         self.homes[1].just_fyi("Member 1 mutes the chat for 1 hour")
-        self.homes[1].mute_chat_long_press(self.chat_name, "mute-for-1-hour")
+        self.homes[1].mute_chat_long_press(self.homes[1].get_group_chat(self.chat_name), "mute-for-1-hour")
         device_time = self.homes[1].driver.device_time
         current_time = datetime.datetime.strptime(device_time, "%Y-%m-%dT%H:%M:%S%z")
         expected_time = current_time + datetime.timedelta(minutes=60)
         expected_text = "Muted until %s %s" % (
             expected_time.strftime('%H:%M'), "today" if current_time.hour < 23 else "tomorrow")
-        chat = self.homes[1].get_chat(self.chat_name)
+        chat = self.homes[1].get_group_chat(self.chat_name)
         chat.long_press_element()
         if self.homes[1].mute_chat_button.text != transl["unmute-chat"]:
             pytest.fail("Chat is not muted")
@@ -545,7 +545,7 @@ class TestGroupChatMultipleDeviceMergedNewUI(MultipleSharedDeviceTestCase):
 
         self.homes[0].just_fyi("Admin sends a message")
         muted_message = "Text message in the muted chat"
-        self.homes[0].get_chat(self.chat_name).click()
+        self.homes[0].get_group_chat(self.chat_name).click()
         self.chats[0].send_message(muted_message)
 
         self.homes[1].just_fyi("Member 1 checks that chat is muted and message is received")
@@ -579,7 +579,7 @@ class TestGroupChatMultipleDeviceMergedNewUI(MultipleSharedDeviceTestCase):
 
         unmuted_message = "Chat is unmuted now"
         self.homes[2].just_fyi("Member 2 sends a message")
-        self.homes[2].get_chat(self.chat_name).click()
+        self.homes[2].get_group_chat(self.chat_name).click()
         try:
             initial_counter = int(self.homes[1].chats_tab.counter.text)
         except NoSuchElementException:

test/appium/tests/critical/test_public_chat_browsing.py

@@ -317,13 +317,14 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase):
         self.channel_name = "cats"
         self.community = self.home.create_community(community_type="closed")
 
-        self.home.get_chat(self.community_name, community=True).click()
+        self.home.get_community(self.community_name).click()
         self.community_view = self.home.get_community_view()
-        self.channel = self.community_view.get_channel(self.channel_name).click()
+        self.channel = self.community_view.get_community_channel(self.channel_name).click()
 
     @marks.testrail_id(703503)
     def test_community_discovery(self):
-        self.home.jump_to_communities_home()
+        self.home.navigate_back_to_home_view()
+        self.home.communities_tab.click()
         self.home.discover_communities_button.click()
         for text in self.discovery_community_attributes:
             if not self.home.element_by_text(text).is_element_displayed(10):
@@ -386,9 +387,11 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase):
 
     @marks.testrail_id(703382)
     def test_community_mute_community_and_channel(self):
-        self.home.jump_to_communities_home()
+        self.home.navigate_back_to_home_view()
+        self.home.communities_tab.click()
         self.home.just_fyi("Mute community and check that channels are also muted")
-        self.home.mute_chat_long_press(chat_name=self.community_name, mute_period="mute-for-1-hour", community=True)
+        self.home.mute_chat_long_press(chat_element=self.home.get_community(self.community_name),
+                                       mute_period="mute-for-1-hour", community=True)
         device_time = self.home.driver.device_time
         current_time = datetime.datetime.strptime(device_time, "%Y-%m-%dT%H:%M:%S%z")
         expected_time = current_time + datetime.timedelta(hours=1)
@@ -396,39 +399,41 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase):
             expected_time.strftime('%H:%M'),
             "today" if current_time.hour < 23 else "tomorrow"
         )
-        self.home.get_chat(self.community_name).long_press_element()
+        self.home.get_community(self.community_name).long_press_element()
         if not self.home.element_by_text(expected_text).is_element_displayed():
             self.errors.append("Text '%s' is not shown for muted community" % expected_text)
         self.home.click_system_back_button()
 
-        self.home.get_chat(self.community_name, community=True).click()
-        self.community_view.get_channel(self.channel_name).long_press_element()
+        self.home.get_community(self.community_name).click()
+        self.community_view.get_community_channel(self.channel_name).long_press_element()
         if not self.home.element_by_text(expected_text).is_element_displayed():
             self.errors.append("Text '%s' is not shown for a channel in muted community" % expected_text)
 
         self.home.just_fyi("Unmute channel and check that the community is also unmuted")
         self.home.mute_channel_button.click()
-        self.home.jump_to_communities_home()
-        self.home.get_chat(self.community_name).long_press_element()
+        self.home.navigate_back_to_home_view()
+        self.home.communities_tab.click()
+        self.home.get_community(self.community_name).long_press_element()
         if not self.home.element_by_text("Mute community").is_element_displayed():
             self.errors.append("Community is not unmuted when channel is unmuted")
         self.home.click_system_back_button()
 
         self.home.just_fyi("Mute channel and check that community is not muted")
-        self.home.get_chat(self.community_name, community=True).click()
-        self.home.mute_chat_long_press(chat_name=self.channel_name, mute_period="mute-for-1-week",
+        self.home.get_community(self.community_name).click()
+        self.home.mute_chat_long_press(chat_element=self.home.get_community_channel(self.channel_name),
+                                       mute_period="mute-for-1-week",
                                        community_channel=True)
         device_time = self.home.driver.device_time
         current_time = datetime.datetime.strptime(device_time, "%Y-%m-%dT%H:%M:%S%z")
         expected_time = current_time + datetime.timedelta(days=7)
         expected_text = "Muted until %s" % expected_time.strftime('%H:%M %a %-d %b')
-        self.community_view.get_channel(self.channel_name).long_press_element()
+        self.community_view.get_community_channel(self.channel_name).long_press_element()
         if not self.home.element_by_text(expected_text).is_element_displayed():
             self.errors.append("Text '%s' is not shown for a muted community channel" % expected_text)
         self.home.click_system_back_button()
-
-        self.home.jump_to_communities_home()
-        self.home.get_chat(self.community_name).long_press_element()
+        self.home.navigate_back_to_home_view()
+        self.home.communities_tab.click()
+        self.home.get_community(self.community_name).long_press_element()
         if self.home.element_by_text(expected_text).is_element_displayed() or self.home.mute_community_button.text != \
                 transl["mute-community"]:
             self.errors.append("Community is muted when channel is muted")
@@ -438,7 +443,7 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase):
 
     @marks.testrail_id(703133)
     def test_restore_multiaccount_with_waku_backup_remove_switch(self):
-        self.home.jump_to_communities_home()
+        self.home.navigate_back_to_home_view()
         profile = self.home.profile_button.click()
         profile.logout()
         self.home.just_fyi("Restore user with predefined communities and contacts")
@@ -549,9 +554,9 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         self.text_message = 'hello'
 
         # self.home_2.just_fyi("Send message to contact (need for blocking contact) test")
-        self.chat_1 = self.home_1.get_chat(self.username_2).click()
+        self.chat_1 = self.home_1.get_one_to_one_chat(self.username_2).click()
         self.chat_1.send_message('hey')
-        self.chat_2 = self.home_2.get_chat(self.username_1).click()
+        self.chat_2 = self.home_2.get_one_to_one_chat(self.username_1).click()
         # self.chat_2.send_message(self.text_message)
         # [home.click_system_back_button_until_element_is_shown() for home in self.homes]
         self.home_1.navigate_back_to_home_view()
@@ -572,7 +577,7 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         self.chat_2.send_message(self.text_message)
         self.chat_2.chat_element_by_text(self.community_name).view_community_button.click()
         self.community_2.join_community()
-        self.channel_2 = self.community_2.get_channel(self.channel_name).click()
+        self.channel_2 = self.community_2.get_community_channel(self.channel_name).click()
 
     @marks.testrail_id(702838)
     def test_community_message_send_check_timestamps_sender_username(self):
@@ -641,7 +646,7 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         self.channel_1.send_images_with_description(image_description, [0, 1])
 
         self.channel_2.just_fyi("Check gallery on second device")
-        self.channel_2.jump_to_communities_home()
+        self.channel_2.navigate_back_to_home_view()
         self.home_2.get_to_community_channel_from_home(self.community_name)
         chat_element = self.channel_2.chat_element_by_text(image_description)
         try:
@@ -861,19 +866,21 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
 
     @marks.testrail_id(702841)
     def test_community_unread_messages_badge(self):
-        self.channel_1.jump_to_communities_home()
+        self.channel_1.navigate_back_to_home_view()
+        self.home_1.communities_tab.click()
         message = 'test message'
         if not self.home_2.chat_floating_screen.is_element_displayed():
-            self.home_2.jump_to_communities_home()
+            self.home_2.navigate_back_to_home_view()
+            self.home_2.communities_tab.click()
             self.home_2.get_to_community_channel_from_home(self.community_name)
         self.channel_2.send_message(message)
         self.home_1.just_fyi('Check new messages badge is shown for community')
-        community_element_1 = self.home_1.get_chat(self.community_name, community=True)
+        community_element_1 = self.home_1.get_community(self.community_name)
         if not community_element_1.new_messages_grey_dot.is_element_displayed(sec=30):
             self.errors.append('New message community badge is not shown')
 
-        community_1 = community_element_1.click()
-        channel_1_element = community_1.get_channel(self.channel_name)
+        community_element_1.click()
+        channel_1_element = self.community_1.get_community_channel(self.channel_name)
 
         self.home_1.just_fyi('Check new messages badge is shown for community')
         if not community_element_1.new_messages_grey_dot.is_element_displayed():
@@ -883,9 +890,12 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
 
     @marks.testrail_id(702894)
     def test_community_contact_block_unblock_offline(self):
-        for channel in self.channel_1, self.channel_2:
+        for i, channel in enumerate([self.channel_1, self.channel_2]):
             if not channel.chat_message_input.is_element_displayed():
-                channel.jump_to_card_by_text('# %s' % self.channel_name)
+                channel.navigate_back_to_home_view()
+                self.homes[i].communities_tab.click()
+                self.homes[i].get_to_community_channel_from_home(self.community_name)
+
         self.channel_1.send_message('message to get avatar of user 2 visible in next message')
 
         self.channel_2.just_fyi("Sending message before block")
@@ -902,9 +912,10 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         self.chat_1.just_fyi('Check that messages from blocked user are hidden in public chat and close app')
         if not self.chat_1.chat_element_by_text(message_to_disappear).is_element_disappeared(30):
             self.errors.append("Messages from blocked user is not cleared in public chat ")
-        self.chat_1.jump_to_messages_home()
-        if self.home_1.element_by_text(self.username_2).is_element_displayed():
-            self.errors.append("1-1 chat from blocked user is not removed!")
+        self.chat_1.navigate_back_to_home_view()
+        self.home_1.chats_tab.click()
+        if not self.home_1.element_by_translation_id("no-messages").is_element_displayed():
+            self.errors.append("1-1 chat from blocked user is not removed and messages home is not empty!")
         self.chat_1.toggle_airplane_mode()
 
         # workaround for app closed after airplane mode
@@ -919,7 +930,10 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
 
         self.chat_1.just_fyi('Check that new messages from blocked user are not delivered')
         self.chat_1.toggle_airplane_mode()
-        self.home_1.jump_to_card_by_text('# %s' % self.channel_name)
+        # self.home_1.jump_to_card_by_text('# %s' % self.channel_name)
+        self.home_1.communities_tab.click()
+        self.home_1.get_community(self.community_name).click()
+        self.home_1.get_community_channel(self.channel_name).click()
         for message in message_to_disappear, message_blocked:
             if self.chat_1.chat_element_by_text(message).is_element_displayed(30):
                 self.errors.append(
@@ -928,7 +942,7 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         self.chat_1.just_fyi('Unblock user and check that can see further messages')
         # TODO: still no blocked users in new UI
         profile_1 = self.home_1.get_profile_view()
-        self.home_1.jump_to_messages_home()
+        self.home_1.navigate_back_to_home_view()
         self.chat_1.profile_button.click()
         profile_1.contacts_button.wait_and_click()
         profile_1.blocked_users_button.wait_and_click()
@@ -939,7 +953,8 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
 
         self.home_2.just_fyi("Check that can send message in community after unblock")
         self.chat_2.send_message(message_unblocked)
-        self.home_1.jump_to_card_by_text('# %s' % self.channel_name)
+        self.home_1.communities_tab.click()
+        self.home_1.get_to_community_channel_from_home(self.community_name)
         self.chat_1.hide_keyboard_if_shown()
         if not self.chat_1.chat_element_by_text(message_unblocked).is_element_displayed(120):
             self.errors.append("%s was not received in public chat after user unblock!" % message_unblocked)
@@ -951,7 +966,7 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         chat_element.member_photo.click()
         self.channel_1.profile_add_to_contacts_button.click()
         self.home_2.just_fyi("Accept contact request after being unblocked")
-        self.home_2.jump_to_messages_home()
+        self.home_2.navigate_back_to_home_view()
         self.home_2.handle_contact_request(self.username_1)
         self.channel_1.profile_send_message_button.click_until_absense_of_element(
             desired_element=self.channel_1.profile_send_message_button, attempts=20, timeout=3)
@@ -964,7 +979,8 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
 
         if unblocked:
             self.home_2.just_fyi("Check message in 1-1 chat after unblock")
-            self.home_2.get_chat(self.username_1).click()
+            self.home_2.chats_tab.click()
+            self.home_2.get_one_to_one_chat(self.username_1).click()
             self.chat_2.send_message(message_unblocked)
             try:
                 self.chat_2.chat_element_by_text(message_unblocked).wait_for_status_to_be(expected_status='Delivered',
@@ -981,14 +997,13 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         for home in self.home_1, self.home_2:
             home.navigate_back_to_home_view()
             home.communities_tab.click()
-        self.home_2.get_chat(self.community_name, community=True).click()
-        self.community_2.get_channel(self.channel_name).click()
+        self.home_2.get_to_community_channel_from_home(self.community_name)
         self.channel_2.send_message(self.text_message)
-        community_1_element = self.community_1.get_chat(self.community_name, community=True)
+        community_1_element = self.community_1.get_community(self.community_name)
         if not community_1_element.new_messages_grey_dot.is_element_displayed(90):
             self.errors.append('New messages counter is not shown in home > Community element')
         community_1_element.click()
-        channel_1_element = self.community_1.get_chat(self.channel_name, community_channel=True)
+        channel_1_element = self.community_1.get_community_channel(self.channel_name)
         if not channel_1_element.new_messages_grey_dot.is_element_displayed():
             self.errors.append("New messages counter is not shown in community channel element")
         self.community_1.click_system_back_button()
@@ -1012,8 +1027,7 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         if not self.channel_2.chat_message_input.is_element_displayed():
             self.channel_2.navigate_back_to_home_view()
             self.home_2.communities_tab.click()
-            self.home_2.get_chat(self.community_name, community=True).click()
-            self.community_2.get_channel(self.channel_name).click()
+            self.home_2.get_to_community_channel_from_home(self.community_name)
 
         self.device_2.just_fyi("Invited member sends a message with a mention")
         self.channel_2.send_message("hi")
@@ -1066,8 +1080,7 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         if not self.channel_1.chat_message_input.is_element_displayed():
             self.channel_1.navigate_back_to_home_view()
             self.home_1.communities_tab.click()
-            self.home_1.get_chat(self.community_name, community=True).click()
-            self.community_1.get_channel(self.channel_name).click()
+            self.home_1.get_to_community_channel_from_home(self.community_name)
 
         self.device_1.just_fyi("Admin sends a message with a mention")
         self.channel_1.mention_user(self.username_2)
@@ -1102,8 +1115,7 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         for home in self.homes:
             home.navigate_back_to_home_view()
             home.jump_to_communities_home()
-            community = home.get_chat(self.community_name, community=True).click()
-            community.get_channel(self.channel_name).click()
+            home.get_to_community_channel_from_home(self.community_name)
 
         for message, symbol in markdown.items():
             self.home_1.just_fyi('Checking that "%s" is applied (%s) in community channel' % (message, symbol))
@@ -1118,20 +1130,39 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
                     '%s is not displayed with markdown in community channel for the recipient (device 1) \n' % message)
 
         for home in self.homes:
-            home.jump_to_messages_home()
+            home.navigate_back_to_home_view()
+            home.chats_tab.click()
 
-        chat_1 = self.home_1.get_chat(self.username_2).click()
-        chat_2 = self.home_2.get_chat(self.username_1).click()
+        if self.home_1.get_one_to_one_chat(self.username_2).is_element_displayed():
+            self.home_1.get_one_to_one_chat(self.username_2).click()
+        else:
+            # if test_community_contact_block_unblock_offline failed we need to add users to contacts again
+            self.home_1.contacts_tab.click()
+            if self.home_1.contact_details_row(username=self.username_2).is_element_displayed():
+                self.home_1.contact_details_row(username=self.username_2).click()
+                self.chat_1.profile_send_message_button.click()
+            else:
+                self.home_1.navigate_back_to_home_view()
+                self.chat_1.profile_button.click()
+                self.profile_1.contacts_button.wait_and_click()
+                self.profile_1.blocked_users_button.wait_and_click()
+                self.profile_1.element_by_text(self.username_2).click()
+                self.chat_1.unblock_contact_button.click()
+                self.chat_1.close_button.click()
+                self.chat_1.navigate_back_to_home_view()
+            self.chat_1.send_message("just a message")
+
+        self.home_2.get_one_to_one_chat(self.username_1).click()
 
         for message, symbol in markdown.items():
             self.home_1.just_fyi('Checking that "%s" is applied (%s) in 1-1 chat' % (message, symbol))
             message_to_send = symbol + message + symbol if 'quote' not in message else symbol + message
-            chat_1.send_message(message_to_send)
-            if not chat_1.chat_element_by_text(message).is_element_displayed(30):
+            self.chat_1.send_message(message_to_send)
+            if not self.chat_1.chat_element_by_text(message).is_element_displayed(30):
                 self.errors.append(
                     '%s is not displayed with markdown in 1-1 chat for the sender (device 1) \n' % message)
 
-            if not chat_2.chat_element_by_text(message).is_element_displayed(30):
+            if not self.chat_2.chat_element_by_text(message).is_element_displayed(30):
                 self.errors.append(
                     '%s is not displayed with markdown in 1-1 chat for the recipient (device 2) \n' % message)
 
@@ -1141,7 +1172,7 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
     def test_community_leave(self):
         self.home_2.navigate_back_to_home_view()
         self.home_2.jump_to_communities_home()
-        community = self.home_2.get_chat(self.community_name, community=True)
+        community = self.home_2.get_community(self.community_name)
         community_to_leave = CommunityView(self.drivers[1])
         community.long_press_until_element_is_shown(community_to_leave.leave_community_button)
         community_to_leave.leave_community_button.click()
@@ -1163,7 +1194,7 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         self.community_1.share_community(community_name, self.username_2)
 
         self.home_2.just_fyi("Device 2 joins the community")
-        self.home_2.get_chat(self.username_1).click()
+        self.home_2.get_one_to_one_chat(self.username_1).click()
         control_message_1_1_chat = "it is just a message text"
         self.chat_2.send_message(control_message_1_1_chat)
         self.chat_2.chat_element_by_text(community_name).view_community_button.click()
@@ -1187,7 +1218,8 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         self.home_1.just_fyi("Device 1 sends a message in the cats channel")
         self.home_1.get_to_community_channel_from_home(community_name=community_name, channel_name=cats_channel)
         self.channel_1.send_message(cats_message)
-        self.channel_1.jump_to_communities_home()
+        self.channel_1.navigate_back_to_home_view()
+        self.home_1.communities_tab.click()
         self.home_1.get_to_community_channel_from_home(community_name=community_name, channel_name=dogs_channel)
 
         self.home_1.just_fyi("Device 1 sends a message with hashtag in the dogs channel")
@@ -1195,7 +1227,8 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         self.channel_1.send_message(message_with_hashtag)
 
         self.home_2.just_fyi("Device 2 clicks on the message with hashtag in the community channel")
-        self.home_2.jump_to_communities_home()
+        self.home_2.navigate_back_to_home_view()
+        self.home_2.communities_tab.click()
         self.home_2.get_to_community_channel_from_home(community_name, dogs_channel)
         self.channel_2.chat_element_by_text(message_with_hashtag).click_on_link_inside_message_body()
         if not self.channel_2.chat_element_by_text(cats_message).is_element_displayed(30):
@@ -1206,14 +1239,16 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         if not self.channel_1.chat_element_by_text(cats_message).is_element_displayed(30):
             self.errors.append("Sender was not navigated to the cats channel")
 
-        [home.jump_to_messages_home() for home in self.homes]
+        for home in self.homes:
+            home.navigate_back_to_home_view()
+            home.chats_tab.click()
 
         self.home_2.just_fyi("Device 2 sends a message with hashtag in 1-1 chat")
-        self.home_2.get_chat(self.username_1).click()
+        self.home_2.get_one_to_one_chat(self.username_1).click()
         self.chat_2.send_message(message_with_hashtag)
 
         self.home_1.just_fyi("Device 1 clicks on the message with hashtag in 1-1 chat")
-        self.home_1.get_chat(self.username_2).click()
+        self.home_1.get_one_to_one_chat(self.username_2).click()
         self.chat_1.chat_element_by_text(message_with_hashtag).click_on_link_inside_message_body()
         if self.chat_1.chat_element_by_text(control_message_1_1_chat).is_element_disappeared():
             self.errors.append("Receiver was navigated out of 1-1 chat")

test/appium/tests/medium/test_activity_center.py

@@ -66,7 +66,7 @@ class TestActivityCenterContactRequestMultipleDevicePR(MultipleSharedDeviceTestC
                     "Unread indicator on contacts tab or on activity center is shown after declining contact request!")
 
         self.device_1.just_fyi("Check that it is still pending contact after declining on sender device")
-        self.home_2.jump_to_messages_home()
+        self.home_2.navigate_back_to_home_view()
         self.home_2.open_activity_center_button.click()
         self.home_2.activity_unread_filter_button.click()
         if not self.home_2.element_by_text_part(
@@ -80,7 +80,7 @@ class TestActivityCenterContactRequestMultipleDevicePR(MultipleSharedDeviceTestC
     @marks.testrail_id(702851)
     def test_activity_center_contact_request_accept_swipe_mark_all_as_read(self):
         self.device_2.just_fyi('Creating a new user on Device2')
-        self.home_2.jump_to_messages_home()
+        self.home_2.navigate_back_to_home_view()
         self.home_2.profile_button.click()
         self.profile_2.logout()
         new_username = "new user"
@@ -153,9 +153,9 @@ class TestActivityMultipleDevicePR(MultipleSharedDeviceTestCase):
         self.one_to_one_message = 'one-t-one message'
 
         self.home_2.just_fyi("Send message to contact (need for jump to) test")
-        self.chat_1 = self.home_1.get_chat(self.username_2).click()
+        self.chat_1 = self.home_1.get_one_to_one_chat(self.username_2).click()
         self.chat_1.send_message(self.one_to_one_message)
-        self.chat_2 = self.home_2.get_chat(self.username_1).click()
+        self.chat_2 = self.home_2.get_one_to_one_chat(self.username_1).click()
         self.chat_2.send_message(self.text_message)
         [home.navigate_back_to_home_view() for home in self.homes]
 
@@ -171,10 +171,10 @@ class TestActivityMultipleDevicePR(MultipleSharedDeviceTestCase):
         self.community_1.share_community(self.community_name, self.username_2)
         self.home_1.get_to_community_channel_from_home(self.community_name)
 
-        self.chat_2 = self.home_2.get_chat(self.username_1).click()
+        self.chat_2 = self.home_2.get_one_to_one_chat(self.username_1).click()
         self.chat_2.chat_element_by_text(self.community_name).view_community_button.click()
         self.community_2.join_community()
-        self.channel_2 = self.community_2.get_channel(self.channel_name).click()
+        self.channel_2 = self.community_2.get_community_channel(self.channel_name).click()
 
     @marks.testrail_id(702936)
     def test_navigation_jump_to(self):
@@ -197,19 +197,20 @@ class TestActivityMultipleDevicePR(MultipleSharedDeviceTestCase):
     @marks.testrail_id(702947)
     def test_activity_center_reply_read_unread_delete_filter_swipe(self):
         message_to_reply, reply_to_message_from_sender = 'something to reply to', 'this is a reply'
-        self.home_1.jump_to_communities_home()
-        self.home_1.get_chat(self.community_name, community=True).click()
-        self.community_1.get_channel(self.channel_name).click()
+        self.home_1.navigate_back_to_home_view()
+        self.home_1.communities_tab.click()
+        self.home_1.get_to_community_channel_from_home(self.community_name)
         self.channel_1.send_message(message_to_reply)
 
-        self.home_1.jump_to_communities_home()
+        self.home_1.navigate_back_to_home_view()
+        self.home_1.communities_tab.click()
         self.channel_2.chat_element_by_text(message_to_reply).wait_for_visibility_of_element(120)
         self.channel_2.quote_message(message_to_reply)
         self.channel_2.send_message(reply_to_message_from_sender)
 
         self.home_1.just_fyi("Checking unread indicators")
         self.home_1.notifications_unread_badge.wait_for_visibility_of_element(120)
-        community_element_1 = self.home_1.get_chat(self.community_name, community=True)
+        community_element_1 = self.home_1.get_community(self.community_name)
         for unread_counter in community_element_1.new_messages_counter, self.home_1.communities_tab.counter:
             if not unread_counter.is_element_displayed(60):
                 self.errors.append('New message counter badge is not shown!')
@@ -253,7 +254,8 @@ class TestActivityMultipleDevicePR(MultipleSharedDeviceTestCase):
         reply_element.click()
         if not self.channel_1.chat_element_by_text(reply_to_message_from_sender).is_element_displayed():
             self.errors.append("Was not redirected to chat after tapping on reply!")
-        self.home_1.jump_to_communities_home()
+        self.home_1.navigate_back_to_home_view()
+        self.home_1.communities_tab.click()
         if self.home_1.notifications_unread_badge.is_element_displayed():
             self.errors.append("Notification was not marked as read after opening it in community channel!")
 
@@ -275,8 +277,11 @@ class TestActivityMultipleDevicePR(MultipleSharedDeviceTestCase):
     @marks.testrail_id(702957)
     def test_activity_center_mentions(self):
         if not self.channel_2.chat_message_input.is_element_displayed():
-            self.channel_2.jump_to_card_by_text('# %s' % self.channel_name)
-        self.home_1.jump_to_communities_home()
+            self.channel_2.navigate_back_to_home_view()
+            self.home_2.communities_tab.click()
+            self.home_2.get_to_community_channel_from_home(self.community_name)
+        self.home_1.navigate_back_to_home_view()
+        self.home_1.communities_tab.click()
 
         self.device_2.just_fyi("Invited member sends a message with a mention")
         self.channel_2.mention_user(self.username_1)
@@ -284,7 +289,7 @@ class TestActivityMultipleDevicePR(MultipleSharedDeviceTestCase):
 
         self.home_1.just_fyi("Checking unread indicators")
         self.home_1.notifications_unread_badge.wait_for_visibility_of_element(120)
-        community_element_1 = self.home_1.get_chat(self.community_name, community=True)
+        community_element_1 = self.home_1.get_community(self.community_name)
         for unread_counter in community_element_1.new_messages_counter, self.home_1.communities_tab.counter:
             if not unread_counter.is_element_displayed(60):
                 self.errors.append('New message counter badge is not shown while mentioned!')
@@ -311,10 +316,11 @@ class TestActivityMultipleDevicePR(MultipleSharedDeviceTestCase):
     @marks.testrail_id(702958)
     def test_activity_center_admin_notification_accept_swipe(self):
         self.home_2.just_fyi("Clearing history")
-        self.home_2.jump_to_messages_home()
-        self.home_2.clear_chat_long_press(self.username_1)
+        self.home_2.navigate_back_to_home_view()
+        self.home_2.chats_tab.click()
+        self.home_2.clear_chat_long_press(self.home_2.get_one_to_one_chat(self.username_1))
 
-        [home.jump_to_communities_home() for home in (self.home_1, self.home_2)]
+        [home.navigate_back_to_home_view() for home in (self.home_1, self.home_2)]
         self.home_1.just_fyi("Open community to message")
         self.home_1.communities_tab.click()
         community_name = 'closed community'
@@ -324,11 +330,14 @@ class TestActivityMultipleDevicePR(MultipleSharedDeviceTestCase):
         self.community_1.share_community(community_name, self.username_2)
 
         self.home_2.just_fyi("Request access to community")
-        self.home_2.jump_to_messages_home()
-        self.chat_2 = self.home_2.get_chat(self.username_1).click()
+        self.home_2.navigate_back_to_home_view()
+        self.home_2.chats_tab.click()
+        self.chat_2 = self.home_2.get_one_to_one_chat(self.username_1).click()
         self.chat_2.chat_element_by_text(community_name).view_community_button.wait_and_click(sec=60)
         self.community_2.join_community()
-        [home.jump_to_communities_home() for home in (self.home_1, self.home_2)]
+        for home in self.home_1, self.home_2:
+            home.navigate_back_to_home_view()
+            home.communities_tab.click()
 
         self.home_1.just_fyi("Checking unread indicators")
         try:

test/appium/tests/medium/test_chats_m.py

@@ -345,7 +345,7 @@ class TestChatMediumMultipleDevice(MultipleSharedDeviceTestCase):
             self.chat_1.put_app_to_background()
             self.device_1.open_notification_bar()
             self.chat_2.get_back_to_home_view(2)
-            self.home_2.get_chat_from_home_view(self.default_username_1).click()
+            self.home_2.get_one_to_one_chat(self.default_username_1).click()
 
         def device_2_sends_sticker():
             self.chat_2.just_fyi("Sending Sticker in chat")
@@ -866,7 +866,7 @@ class TestChatKeycardMentionsMediumMultipleDevice(MultipleSharedDeviceTestCase):
             self.errors.append('New messages counter is shown on Home button for already seen message')
         if self.home_1.get_chat(self.sender['username']).new_messages_counter.text == '1':
             self.errors.append('New messages counter is shown on chat element for already seen message')
-        self.home_1.delete_chat_long_press(self.sender['username'])
+        self.home_1.delete_chat_long_press(self.home_1.get_one_to_one_chat(self.sender['username']))
 
         self.home_1.just_fyi("Checking preview of message and chat highlighting")
         self.chat_2.send_message(message_3)