fix selectable text input repeating

Makefile

@@ -1,4 +1,4 @@
-.PHONY: nix-add-gcroots clean nix-clean run-metro test release _list _fix-node-perms _tmpdir-rm
+.PHONY: nix-add-gcroots clean nix-clean run-metro test release _list _fix-node-perms _tmpdir-mk _tmpdir-rm _install-hooks
 
 help: SHELL := /bin/sh
 help: ##@other Show this help
@@ -118,11 +118,10 @@ _fix-node-perms: ##@prepare Fix permissions so that directory can be cleaned
 	$(shell test -d node_modules && chmod -R 744 node_modules)
 	$(shell test -d node_modules.tmp && chmod -R 744 node_modules.tmp)
 
-$(TMPDIR): SHELL := /bin/sh
-$(TMPDIR): ##@prepare Create a TMPDIR for temporary files
+_tmpdir-mk: SHELL := /bin/sh
+_tmpdir-mk: ##@prepare Create a TMPDIR for temporary files
 	@mkdir -p "$(TMPDIR)"
 # Make sure TMPDIR exists every time make is called
-_tmpdir-mk: $(TMPDIR)
 -include _tmpdir-mk
 
 _tmpdir-rm: SHELL := /bin/sh

index.js

@@ -1,3 +1,2 @@
 import "node-libs-react-native/globals";
-import "react-native-reanimated"
 import "./app/index.js";

src/mocks/js_dependencies.cljs

@@ -206,60 +206,58 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
 
 (def react-native-reanimated
   #js
-   {:default                #js
-                             {:createAnimatedComponent identity
-                              :eq                      nil
-                              :greaterOrEq             nil
-                              :greaterThan             nil
-                              :lessThan                nil
-                              :lessOrEq                nil
-                              :add                     nil
-                              :diff                    nil
-                              :divide                  nil
-                              :sub                     nil
-                              :multiply                nil
-                              :abs                     nil
-                              :min                     nil
-                              :max                     nil
-                              :neq                     nil
-                              :and                     nil
-                              :or                      nil
-                              :not                     nil
-                              :set                     nil
-                              :startClock              nil
-                              :stopClock               nil
-                              :Value                   nil
-                              :Clock                   nil
-                              :debug                   nil
-                              :log                     nil
-                              :event                   nil
-                              :cond                    nil
-                              :block                   nil
-                              :interpolateNode         nil
-                              :call                    nil
-                              :timing                  nil
-                              :onChange                nil
-                              :View                    #js {}
-                              :Image                   #js {}
-                              :ScrollView              #js {}
-                              :Text                    #js {}
-                              :Extrapolate             #js {:CLAMP nil}
-                              :Code                    #js {}}
-    :EasingNode             #js
-                             {:bezier identity
-                              :linear identity}
-    :clockRunning           nil
-    :useSharedValue         (fn [])
-    :useAnimatedStyle       (fn [])
-    :withTiming             (fn [])
-    :withDelay              (fn [])
-    :Easing                 #js {:bezier identity}
-    :Keyframe               (fn [])
-    :enableLayoutAnimations (fn [])
-    :SlideOutUp             js/__STATUS_MOBILE_JS_IDENTITY_PROXY__
-    :SlideInUp              js/__STATUS_MOBILE_JS_IDENTITY_PROXY__
-    :LinearTransition       js/__STATUS_MOBILE_JS_IDENTITY_PROXY__})
-
+   {:default          #js
+                       {:createAnimatedComponent identity
+                        :eq                      nil
+                        :greaterOrEq             nil
+                        :greaterThan             nil
+                        :lessThan                nil
+                        :lessOrEq                nil
+                        :add                     nil
+                        :diff                    nil
+                        :divide                  nil
+                        :sub                     nil
+                        :multiply                nil
+                        :abs                     nil
+                        :min                     nil
+                        :max                     nil
+                        :neq                     nil
+                        :and                     nil
+                        :or                      nil
+                        :not                     nil
+                        :set                     nil
+                        :startClock              nil
+                        :stopClock               nil
+                        :Value                   nil
+                        :Clock                   nil
+                        :debug                   nil
+                        :log                     nil
+                        :event                   nil
+                        :cond                    nil
+                        :block                   nil
+                        :interpolateNode         nil
+                        :call                    nil
+                        :timing                  nil
+                        :onChange                nil
+                        :View                    #js {}
+                        :Image                   #js {}
+                        :ScrollView              #js {}
+                        :Text                    #js {}
+                        :Extrapolate             #js {:CLAMP nil}
+                        :Code                    #js {}}
+    :EasingNode       #js
+                       {:bezier identity
+                        :linear identity}
+    :clockRunning     nil
+    :useSharedValue   (fn [])
+    :useAnimatedStyle (fn [])
+    :withTiming       (fn [])
+    :withDelay        (fn [])
+    :Easing           #js {:bezier identity}
+    :Keyframe         (fn [])
+    :SlideOutUp       js/__STATUS_MOBILE_JS_IDENTITY_PROXY__
+    :SlideInUp        js/__STATUS_MOBILE_JS_IDENTITY_PROXY__
+    :LinearTransition js/__STATUS_MOBILE_JS_IDENTITY_PROXY__})
 (def react-native-gesture-handler
   #js
    {:default                  #js {}

src/quo2/components/banners/__tests__/banner_component_spec.cljs

@@ -1,4 +1,4 @@
-(ns quo2.components.banners.banner.component-spec
+(ns quo2.components.banners.--tests--.banner-component-spec
   (:require ["@testing-library/react-native" :as rtl]
             [quo2.components.banners.banner.view :as banner]
             [reagent.core :as reagent]))
@@ -15,13 +15,3 @@
         (.toBeTruthy))
     (-> (js/expect (rtl/screen.getByText "5"))
         (.toBeTruthy))))
-
-(js/global.test "banner component fires an event when pressed"
-  (let [mock-fn (js/jest.fn)]
-    (fn []
-      (render-banner {:on-press        mock-fn
-                      :pins-count      "5"
-                      :latest-pin-text "this message"})
-      (rtl/fireEvent.press (rtl/screen.getByText "this message"))
-      (-> (js/expect mock-fn)
-          (.toHaveBeenCalledTimes 1)))))

src/quo2/components/banners/banner/style.cljs

@@ -3,26 +3,17 @@
 
 
 (def container
-  {:height           40
-   :flex             1
-   :background-color colors/primary-50-opa-20
-   :flex-direction   :row
-   :align-items      :center
-   :padding-right    22
-   :padding-left     20
-   :padding-vertical 10})
+  {:width              "100%"
+   :height             50
+   :background-color   colors/primary-50-opa-20
+   :flex-direction     :row
+   :align-items        :center
+   :padding-horizontal 20
+   :padding-vertical   10})
 
 (def counter
-  {:flex            1
+  {:padding-right   22
+   :height          20
+   :width           20
    :justify-content :center
-   :align-items     :center})
-
-(def icon
-  {:flex         1
-   :margin-right 10})
-
-(defn text
-  [hide-pin?]
-  {:flex         (if hide-pin? 16 15)
-   :margin-right 10})
-
+   :align-items     :center})

src/quo2/components/banners/banner/view.cljs

@@ -3,28 +3,22 @@
             [quo2.components.counter.counter :as counter]
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
             [react-native.core :as rn]))
 
 (defn banner
-  [{:keys [hide-pin? latest-pin-text pins-count on-press]}]
-  (when (pos? pins-count)
-    [rn/touchable-opacity
-     {:accessibility-label :pinned-banner
-      :style               style/container
-      :active-opacity      1
-      :on-press            on-press}
-     (when-not hide-pin?
-       [rn/view {:style style/icon}
-        [icons/icon :i/pin
-         {:color (colors/theme-colors colors/neutral-100 colors/white)
-          :size  20}]])
-     [rn/view {:style (style/text hide-pin?)}
-      [text/text
-       {:number-of-lines 1
-        :size            :paragraph-2}
-       latest-pin-text]]
-     [rn/view
-      {:accessibility-label :pins-count
-       :style               style/counter}
-      (when (> pins-count 1) [counter/counter {:type :secondary} pins-count])]]))
+  [{:keys [show-pin? latest-pin-text pins-count on-press]}]
+  [rn/touchable-opacity
+   {:accessibility-label :pinned-banner
+    :style               style/container
+    :active-opacity      1
+    :on-press            on-press}
+   (when show-pin? [icons/icon :i/pin {:size 20}])
+   [text/text
+    {:number-of-lines 1
+     :size            :paragraph-2
+     :style           {:margin-left 10 :margin-right 50}}
+    latest-pin-text]
+   [rn/view
+    {:accessibility-label :pins-count
+     :style               style/counter}
+    (when (pos? pins-count) [counter/counter {:type :secondary} pins-count])]])

src/quo2/components/community/community_list_view.cljs

@@ -5,8 +5,19 @@
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [quo2.components.community.icon :as community-icon]
-            [react-native.core :as rn]))
+            [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]))
+
+(defn community-icon-view
+  [community-icon]
+  [rn/view
+   {:width  32
+    :height 32}
+   [fast-image/fast-image
+    {:source {:uri community-icon}
+     :style  {:height        32
+              :border-radius 16
+              :width         32}}]])
 
 (defn notification-view
   [{:keys [muted?
@@ -43,18 +54,27 @@
            unread-messages?
            unread-mentions-count
            community-icon
-           tokens]}]
+           tokens
+           background-color]}]
   [rn/view
    {:style (merge (style/community-card 16)
-                  {:margin-bottom 12})}
+                  {:margin-bottom     12
+                   :margin-horizontal 20})}
    [rn/touchable-highlight
     (merge {:style {:height        56
                     :border-radius 16}}
            props)
     [rn/view {:flex 1}
-     [rn/view (style/list-info-container)
-      [community-icon/community-icon
-       {:images community-icon} 32]
+     [rn/view
+      {:flex-direction     :row
+       :border-radius      16
+       :padding-horizontal 12
+       :align-items        :center
+       :padding-vertical   8
+       :background-color   background-color}
+      [rn/view]
+      (when community-icon
+        [community-icon-view community-icon])
       [rn/view
        {:flex              1
         :margin-horizontal 12}
@@ -89,36 +109,39 @@
            community-icon
            tokens
            locked?]}]
-  [rn/touchable-highlight
-   (merge {:underlay-color (colors/theme-colors
-                            colors/neutral-5
-                            colors/neutral-95)
-           :style          {:border-radius 12}}
-          props)
-   [rn/view {:flex 1}
-    [rn/view (style/membership-info-container)
-     [community-icon/community-icon
-      {:images community-icon} 32]
+  [rn/view {:margin-bottom 20}
+   [rn/touchable-highlight
+    (merge {:underlay-color colors/primary-50-opa-5
+            :style          {:border-radius 12}}
+           props)
+    [rn/view {:flex 1}
      [rn/view
-      {:flex            1
-       :margin-left     12
-       :justify-content :center}
-      [text/text
-       {:accessibility-label :chat-name-text
-        :number-of-lines     1
-        :ellipsize-mode      :tail
-        :weight              :semi-bold
-        :size                :paragraph-1}
-       name]]
+      {:flex-direction :row
+       :border-radius  16
+       :align-items    :center}
 
-     [rn/view
-      {:justify-content :center
-       :margin-right    16}
-      (if (= status :gated)
-        [community-view/permission-tag-container
-         {:locked? locked?
-          :tokens  tokens}]
-        [notification-view
-         {:muted?                muted?
-          :unread-mentions-count unread-mentions-count
-          :unread-messages?      unread-messages?}])]]]])
+      (when community-icon
+        [community-icon-view community-icon])
+      [rn/view
+       {:flex            1
+        :margin-left     12
+        :justify-content :center}
+       [text/text
+        {:accessibility-label :chat-name-text
+         :number-of-lines     1
+         :ellipsize-mode      :tail
+         :weight              :semi-bold
+         :size                :paragraph-1}
+        name]]
+
+      [rn/view
+       {:justify-content :center
+        :margin-right    16}
+       (if (= status :gated)
+         [community-view/permission-tag-container
+          {:locked? locked?
+           :tokens  tokens}]
+         [notification-view
+          {:muted?                muted?
+           :unread-mentions-count unread-mentions-count
+           :unread-messages?      unread-messages?}])]]]]])

src/quo2/components/community/community_view.cljs

@@ -46,12 +46,12 @@
      ^{:key id}
      [rn/view {:margin-right 8}
       [tag/tag
-       {:id        id
-        :size      24
-        :label     tag-label
-        :type      :emoji
-        :labelled? true
-        :resource  resource}]])])
+       {:id       id
+        :size     24
+        :label    tag-label
+        :type     :emoji
+        :labelled true
+        :resource resource}]])])
 
 (defn community-title
   [{:keys [title description size] :or {size :small}}]

src/quo2/components/community/icon.cljs

@@ -10,4 +10,4 @@
                :border-width  0
                :border-color  :transparent
                :width         size
-               :height        size}}]))
+               :height        size}}]))

src/quo2/components/community/style.cljs

@@ -77,20 +77,19 @@
                       colors/white
                       colors/neutral-90)})
 
-(defn list-info-container
+(defn list-view-content-container
   []
-  {:flex-direction     :row
-   :border-radius      16
-   :padding-horizontal 12
-   :align-items        :center
-   :padding-vertical   8})
+  {:flex-direction   :row
+   :border-radius    16
+   :align-items      :center
+   :background-color (colors/theme-colors
+                      colors/white
+                      colors/neutral-90)})
 
-(defn membership-info-container
+(defn list-view-chat-icon
   []
-  {:flex-direction :row
-   :border-radius  16
-   :align-items    :center
-   :height         48})
+  {:border-radius 32
+   :padding       12})
 
 (defn community-title-description-container
   [margin-top]
@@ -108,4 +107,4 @@
   []
   {:position :absolute
    :top      8
-   :right    8})
+   :right    8})

src/quo2/components/drawers/permission_context/__tests__/permission_context_component_spec.cljs

@@ -1,13 +0,0 @@
-(ns quo2.components.drawers.permission-context.--tests--.permission-context-component-spec
-  (:require [quo2.components.drawers.permission-context.view :as permission-context]
-            [react-native.core :as rn]
-            [test-helpers.component :as h]))
-
-(h/describe "permission context"
-  (h/test
-    (h/render [permission-context/view
-               [rn/text
-                {:accessibility-label :accessibility-id}
-                "a sample label"]])
-    (-> (js/expect (h/get-by-label-text :accessibility-id))
-        (.toBeTruthy))))

src/quo2/components/drawers/permission_context/style.cljs

@@ -1,16 +0,0 @@
-(ns quo2.components.drawers.permission-context.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(def radius 20)
-(def container
-  {:padding-top             16
-   :padding-bottom          48
-   :padding-horizontal      20
-   :shadow-offset           {:width  0
-                             :height 2}
-   :shadow-radius           radius
-   :border-top-left-radius  radius
-   :border-top-right-radius radius
-   :elevation               2
-   :shadow-opacity          1
-   :shadow-color            colors/shadow})

src/quo2/components/drawers/permission_context/view.cljs

@@ -1,8 +0,0 @@
-(ns quo2.components.drawers.permission-context.view
-  (:require [react-native.core :as rn]
-            [quo2.components.drawers.permission-context.style :as style]))
-
-(defn view
-  [children]
-  [rn/view {:style style/container}
-   children])

src/quo2/components/list_items/menu_item.cljs

@@ -7,14 +7,12 @@
 (defn themes
   [type]
   (case type
-    :main        {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
-                  :background (theme-colors colors/white colors/neutral-90)
-                  :text-color (theme-colors colors/neutral-100 colors/white)}
-    :danger      {:icon-color (theme-colors colors/danger-50 colors/danger-60)
-                  :background (theme-colors colors/white colors/neutral-90)
-                  :text-color (theme-colors colors/danger-50 colors/danger-60)}
-    :transparent {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
-                  :text-color (theme-colors colors/neutral-100 colors/white)}))
+    :main   {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
+             :background (theme-colors colors/white colors/neutral-90)
+             :text-color (theme-colors colors/neutral-100 colors/white)}
+    :danger {:icon-color (theme-colors colors/danger-50 colors/danger-60)
+             :background (theme-colors colors/white colors/neutral-90)
+             :text-color (theme-colors colors/danger-50 colors/danger-60)}))
 
 (defn menu-item
   [{:keys [type title accessibility-label icon on-press style-props subtitle subtitle-color]

src/quo2/components/notifications/toast.cljs

@@ -8,14 +8,14 @@
             [react-native.core :as rn]))
 
 (def ^:private themes
-  {:container        {:dark  {:background-color colors/white-opa-70}
-                      :light {:background-color colors/neutral-80-opa-70}}
-   :text             {:dark  {:color colors/neutral-100}
-                      :light {:color colors/white}}
-   :icon             {:dark  {:color colors/neutral-100}
-                      :light {:color colors/white}}
-   :action-container {:dark  {:background-color :colors/neutral-80-opa-5}
-                      :light {:background-color :colors/white-opa-5}}})
+  {:container        {:light {:background-color colors/white-opa-70}
+                      :dark  {:background-color colors/neutral-80-opa-70}}
+   :text             {:light {:color colors/neutral-100}
+                      :dark  {:color colors/white}}
+   :icon             {:light {:color colors/neutral-100}
+                      :dark  {:color colors/white}}
+   :action-container {:light {:background-color :colors/neutral-80-opa-5}
+                      :dark  {:background-color :colors/white-opa-5}}})
 
 (defn- merge-theme-style
   [component-key styles]
@@ -23,9 +23,7 @@
 
 (defn toast-action-container
   [{:keys [on-press style]} & children]
-  [rn/touchable-highlight
-   {:on-press       on-press
-    :underlay-color :transparent}
+  [rn/touchable-highlight {:on-press on-press}
    [into
     [rn/view
      {:style (merge
@@ -42,8 +40,7 @@
 
 (defn toast-undo-action
   [duration on-press]
-  [toast-action-container
-   {:on-press on-press :accessibility-label :toast-undo-action}
+  [toast-action-container {:on-press on-press}
    [rn/view {:style {:margin-right 5}}
     [count-down-circle/circle-timer {:duration duration}]]
    [text/text
@@ -66,10 +63,7 @@
     [rn/view {:style {:padding 2}} left]
     [rn/view {:style {:padding 4 :flex 1}}
      [text/text
-      {:size                :paragraph-2
-       :weight              :medium
-       :style               (merge-theme-style :text {})
-       :accessibility-label :toast-content}
+      {:size :paragraph-2 :weight :medium :style (merge-theme-style :text {})}
       middle]]
     (when right right)]])
 

src/quo2/components/tabs/tabs.cljs

@@ -28,6 +28,28 @@
                           :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}}
    [notification-dot]])
 
+(defn tabs
+  [{:keys [default-active on-change style]}]
+  (let [active-tab-id (reagent/atom default-active)]
+    (fn [{:keys [data size] :or {size default-tab-size}}]
+      [rn/view (merge {:flex-direction :row} style)
+       (doall
+        (for [{:keys [label id notification-dot? accessibility-label]} data]
+          ^{:key id}
+          [rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
+           (when notification-dot?
+             [indicator])
+           [tab/tab
+            {:id                  id
+             :size                size
+             :accessibility-label accessibility-label
+             :active              (= id @active-tab-id)
+             :on-press            (fn []
+                                    (reset! active-tab-id id)
+                                    (when on-change
+                                      (on-change id)))}
+            label]]))])))
+
 (defn- calculate-fade-end-percentage
   [{:keys [offset-x content-width layout-width max-fade-percentage]}]
   (let [fade-percentage (max max-fade-percentage
@@ -38,35 +60,30 @@
       0.99
       (utils.number/naive-round fade-percentage 2))))
 
-(defn tabs
-  "Usage:
-   {:type             :icon/:emoji/:label
-    :component        tag/tab
-    :size             32/24
-    :on-press         fn
-    :blurred?         true/false 
-    :labelled?        true/false
-    :disabled?        true/false
-    :scrollable?      false
-    :scroll-on-press? true
-    :fade-end?        true
-    :on-change        fn
-    :default-active   tag-id
-    :data             [{:id :label \"\" :resource \"url\"}
-                       {:id :label \"\" :resource \"url\"}]}
-  Opts:
-   - `component` this is to determine which component is to be rendered since the 
-                 logic in this view is shared between tab and tag component
-   - `blurred`   boolean: use to determine border color if the background is blurred
-   - `type`      can be icon or emoji with or without a tag label
-   - `labelled`  boolean: is true if tag has label else false
-   - `size` number
-   - `scroll-on-press?` When non-nil, clicking on a tag centers it the middle
-  (with animation enabled).
-   - `fade-end?` When non-nil, causes the end of the scrollable view to fade out.
-   - `fade-end-percentage` Percentage where fading starts relative to the total
-  layout width of the `flat-list` data."
+(defn scrollable-tabs
+  "Just like the component `tabs`, displays horizontally scrollable tabs with
+  extra options to control if/how the end of the scroll view fades.
 
+  Tabs are rendered using ReactNative's FlatList, which offers the convenient
+  `scrollToIndex` method. FlatList accepts VirtualizedList and ScrollView props,
+  and so does this component.
+
+  Usage:
+  [tabs/scrollable-tabs
+    {:scroll-on-press? true
+     :fade-end?        true
+     :on-change        #(...)
+     :default-active   :tab-a
+     :data             [{:id :tab-a :label \"Tab A\"}
+                        {:id :tab-b :label \"Tab B\"}]}]]
+
+  Opts:
+  - `size` number
+  - `scroll-on-press?` When non-nil, clicking on a tab centers it the middle
+  (with animation enabled).
+  - `fade-end?` When non-nil, causes the end of the scrollable view to fade out.
+  - `fade-end-percentage` Percentage where fading starts relative to the total
+  layout width of the `flat-list` data."
   [{:keys [default-active fade-end-percentage]
     :or   {fade-end-percentage 0.8}}]
   (let [active-tab-id (reagent/atom default-active)
@@ -80,123 +97,99 @@
                on-scroll
                scroll-event-throttle
                scroll-on-press?
-               scrollable?
-               style
                size
                blur?
                override-theme]
         :or   {fade-end-percentage   fade-end-percentage
                fade-end?             false
                scroll-event-throttle 64
-               scrollable?           false
                scroll-on-press?      false
                size                  default-tab-size}
         :as   props}]
-      (if scrollable?
-        (let [maybe-mask-wrapper (if fade-end?
-                                   [masked-view/masked-view
-                                    {:mask-element
-                                     (reagent/as-element
-                                      [linear-gradient/linear-gradient
-                                       {:colors         [:black :transparent]
-                                        :locations      [(get @fading :fade-end-percentage) 1]
-                                        :start          {:x 0 :y 0}
-                                        :end            {:x 1 :y 0}
-                                        :pointer-events :none
-                                        :style          {:width  "100%"
-                                                         :height "100%"}}])}]
-                                   [:<>])]
-          (conj
-           maybe-mask-wrapper
-           [rn/flat-list
-            (merge
-             (dissoc props
-                     :default-active
-                     :fade-end-percentage
-                     :fade-end?
-                     :on-change
-                     :scroll-on-press?
-                     :size)
-             (when scroll-on-press?
-               {:initial-scroll-index (utils.collection/first-index #(= @active-tab-id (:id %)) data)})
-             {:ref                               #(reset! flat-list-ref %)
-              :extra-data                        (str @active-tab-id)
-              :horizontal                        true
-              :scroll-event-throttle             scroll-event-throttle
-              :shows-horizontal-scroll-indicator false
-              :data                              data
-              :key-fn                            (comp str :id)
-              :on-scroll-to-index-failed         identity
-              :on-scroll                         (fn [^js e]
-                                                   (when fade-end?
-                                                     (let [offset-x       (oget
-                                                                           e
-                                                                           "nativeEvent.contentOffset.x")
-                                                           content-width
-                                                           (oget
-                                                            e
-                                                            "nativeEvent.contentSize.width")
-                                                           layout-width
-                                                           (oget e
-                                                                 "nativeEvent.layoutMeasurement.width")
-                                                           new-percentage
-                                                           (calculate-fade-end-percentage
-                                                            {:offset-x            offset-x
-                                                             :content-width       content-width
-                                                             :layout-width        layout-width
-                                                             :max-fade-percentage fade-end-percentage})]
-                                                       ;; Avoid unnecessary re-rendering.
-                                                       (when (not= new-percentage
-                                                                   (get @fading :fade-end-percentage))
-                                                         (swap! fading assoc
-                                                           :fade-end-percentage
-                                                           new-percentage))))
-                                                   (when on-scroll
-                                                     (on-scroll e)))
-              :render-fn                         (fn [{:keys [id label]} index]
-                                                   [rn/view
-                                                    {:style {:margin-right  (if (= size default-tab-size)
-                                                                              12
-                                                                              8)
-                                                             :padding-right (when (= index
-                                                                                     (dec (count data)))
-                                                                              (get-in props
-                                                                                      [:style
-                                                                                       :padding-left]))}}
-                                                    [tab/tab
-                                                     {:id             id
-                                                      :size           size
-                                                      :override-theme override-theme
-                                                      :blur?          blur?
-                                                      :active         (= id @active-tab-id)
-                                                      :on-press       (fn [id]
-                                                                        (reset! active-tab-id id)
-                                                                        (when scroll-on-press?
-                                                                          (.scrollToIndex
-                                                                           ^js
-                                                                           @flat-list-ref
-                                                                           #js
-                                                                            {:animated     true
-                                                                             :index        index
-                                                                             :viewPosition
-                                                                             0.5}))
-                                                                        (when on-change
-                                                                          (on-change id)))}
-                                                     label]])})]))
-        [rn/view (merge {:flex-direction :row} style)
-         (doall
-          (for [{:keys [label id notification-dot? accessibility-label]} data]
-            ^{:key id}
-            [rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
-             (when notification-dot?
-               [indicator])
-             [tab/tab
-              {:id                  id
-               :size                size
-               :accessibility-label accessibility-label
-               :active              (= id @active-tab-id)
-               :on-press            (fn []
-                                      (reset! active-tab-id id)
-                                      (when on-change
-                                        (on-change id)))}
-              label]]))]))))
+      (let [maybe-mask-wrapper (if fade-end?
+                                 [masked-view/masked-view
+                                  {:mask-element
+                                   (reagent/as-element
+                                    [linear-gradient/linear-gradient
+                                     {:colors         [:black :transparent]
+                                      :locations      [(get @fading :fade-end-percentage) 1]
+                                      :start          {:x 0 :y 0}
+                                      :end            {:x 1 :y 0}
+                                      :pointer-events :none
+                                      :style          {:width  "100%"
+                                                       :height "100%"}}])}]
+                                 [:<>])]
+        (conj
+         maybe-mask-wrapper
+         [rn/flat-list
+          (merge
+           (dissoc props
+                   :default-active
+                   :fade-end-percentage
+                   :fade-end?
+                   :on-change
+                   :scroll-on-press?
+                   :size)
+           (when scroll-on-press?
+             {:initial-scroll-index (utils.collection/first-index #(= @active-tab-id (:id %)) data)})
+           {:ref                               #(reset! flat-list-ref %)
+            :extra-data                        (str @active-tab-id)
+            :horizontal                        true
+            :scroll-event-throttle             scroll-event-throttle
+            :shows-horizontal-scroll-indicator false
+            :data                              data
+            :key-fn                            (comp str :id)
+            :on-scroll-to-index-failed         identity
+            :on-scroll                         (fn [^js e]
+                                                 (when fade-end?
+                                                   (let [offset-x       (oget
+                                                                         e
+                                                                         "nativeEvent.contentOffset.x")
+                                                         content-width  (oget
+                                                                         e
+                                                                         "nativeEvent.contentSize.width")
+                                                         layout-width
+                                                         (oget e "nativeEvent.layoutMeasurement.width")
+                                                         new-percentage
+                                                         (calculate-fade-end-percentage
+                                                          {:offset-x            offset-x
+                                                           :content-width       content-width
+                                                           :layout-width        layout-width
+                                                           :max-fade-percentage fade-end-percentage})]
+                                                     ;; Avoid unnecessary re-rendering.
+                                                     (when (not= new-percentage
+                                                                 (get @fading :fade-end-percentage))
+                                                       (swap! fading assoc
+                                                         :fade-end-percentage
+                                                         new-percentage))))
+                                                 (when on-scroll
+                                                   (on-scroll e)))
+            :render-fn                         (fn [{:keys [id label]} index]
+                                                 [rn/view
+                                                  {:style {:margin-right  (if (= size default-tab-size)
+                                                                            12
+                                                                            8)
+                                                           :padding-right (when (= index
+                                                                                   (dec (count data)))
+                                                                            (get-in props
+                                                                                    [:style
+                                                                                     :padding-left]))}}
+                                                  [tab/tab
+                                                   {:id             id
+                                                    :size           size
+                                                    :override-theme override-theme
+                                                    :blur?          blur?
+                                                    :active         (= id @active-tab-id)
+                                                    :on-press       (fn [id]
+                                                                      (reset! active-tab-id id)
+                                                                      (when scroll-on-press?
+                                                                        (.scrollToIndex ^js
+                                                                                        @flat-list-ref
+                                                                                        #js
+                                                                                         {:animated true
+                                                                                          :index index
+                                                                                          :viewPosition
+                                                                                          0.5}))
+                                                                      (when on-change
+                                                                        (on-change id)))}
+                                                   label]])})])))))

src/quo2/components/tags/base_tag.cljs

@@ -16,21 +16,25 @@
            {:width size})))
 
 (defn base-tag
+  "opts
+   {:type :icon/:emoji/:label/:permission
+    :size 32/24}
+    :labelled true"
   [_]
-  (fn [{:keys [id size disabled? border-color border-width background-color on-press
-               accessibility-label labelled? type]
+  (fn [{:keys [id size disabled border-color border-width background-color on-press
+               accessibility-label label type]
         :or   {size 32}} children]
     [rn/touchable-without-feedback
-     (merge {:disabled            disabled?
+     (merge {:disabled            disabled
              :accessibility-label accessibility-label}
             (when on-press
               {:on-press #(on-press id)}))
      [rn/view
       {:style (merge (style-container size
-                                      disabled?
+                                      disabled
                                       border-color
                                       border-width
                                       background-color
-                                      labelled?
+                                      label
                                       type))}
       children]]))

src/quo2/components/tags/tag.cljs

@@ -68,40 +68,26 @@
       label])])
 
 (defn tag
-  "opts
-   {:type         :icon/:emoji/:label
-    :size         32/24
-    :on-press     fn
-    :blurred?     true/false 
-    :resource     icon/image
-    :labelled?    true/false
-    :disabled?    true/false}
-  
-   opts
-    - `blurred`  boolean: use to determine border color if the background is blurred
-    - `type`     can be icon or emoji with or without a tag label
-    - `labelled` boolean: is true if tag has label else false"
   [_ _]
-  (fn [{:keys [id on-press disabled? size resource active accessibility-label
-               label type labelled? blurred? icon-color]
+  (fn [{:keys [id on-press disabled size resource active accessibility-label
+               label type labelled blurred icon-color]
         :or   {size 32}}]
-    (let [state                                                  (cond disabled? :disabled
-                                                                       active    :active
-                                                                       :else     :default)
+    (let [state                                                  (cond disabled :disabled
+                                                                       active   :active
+                                                                       :else    :default)
           {:keys [border-color blurred-border-color text-color]}
           (get-in themes [(theme/get-theme) state])]
-      [rn/view {:style {:align-items :center}}
-       [base-tag/base-tag
-        {:id                  id
-         :size                size
-         :border-width        1
-         :border-color        (if blurred?
-                                blurred-border-color
-                                border-color)
-         :on-press            on-press
-         :accessibility-label accessibility-label
-         :disabled?           disabled?
-         :type                type
-         :labelled?           (if (= type :label) true labelled?)}
-        [tag-resources size type resource icon-color label text-color labelled?]]])))
+      [base-tag/base-tag
+       {:id                  id
+        :size                size
+        :border-width        1
+        :border-color        (if blurred
+                               blurred-border-color
+                               border-color)
+        :on-press            on-press
+        :accessibility-label accessibility-label
+        :disabled            disabled
+        :type                type
+        :label               label}
+       [tag-resources size type resource icon-color label text-color labelled]])))
 

src/quo2/components/tags/tags.cljs

@@ -1,171 +1,29 @@
 (ns quo2.components.tags.tags
-  (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
-            [oops.core :refer [oget]]
-            [status-im.ui.components.react :as react]
-            [status-im.utils.core :as utils]
-            [quo2.components.tags.tag :as tag]
-            [utils.number :as number-utils]))
-
-(def default-tab-size 32)
-
-(defn calculate-fade-end-percentage
-  [{:keys [offset-x content-width layout-width max-fade-percentage]}]
-  (let [fade-percentage (max max-fade-percentage
-                             (/ (+ layout-width offset-x)
-                                content-width))]
-    ;; Truncate to avoid unnecessary rendering.
-    (if (> fade-percentage 0.99)
-      0.99
-      (number-utils/naive-round fade-percentage 2))))
+  (:require [quo2.components.tags.tag :as tag]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]))
 
 (defn tags
-  "Usage:
-   {:type             :icon/:emoji/:label
-    :component        tag/tab
-    :size             32/24
-    :on-press         fn
-    :blurred?         true/false 
-    :labelled?        true/false
-    :disabled?        true/false
-    :scroll-on-press? true
-    :scrollable?      false
-    :fade-end?        true
-    :on-change        fn
-    :default-active   tag-id
-    :data             [{:id :label \"\" :resource \"url\"}
-                       {:id :label \"\" :resource \"url\"}]}
-  Opts:
-   - `component` this is to determine which component is to be rendered since the 
-                 logic in this view is shared between tab and tag component
-   - `blurred`   boolean: use to determine border color if the background is blurred
-   - `type`      can be icon or emoji with or without a tag label
-   - `labelled`  boolean: is true if tag has label else false
-   - `size` number
-   - `scroll-on-press?` When non-nil, clicking on a tag centers it the middle
-  (with animation enabled).
-   - `fade-end?` When non-nil, causes the end of the scrollable view to fade out.
-   - `fade-end-percentage` Percentage where fading starts relative to the total
-  layout width of the `flat-list` data."
-
-  [{:keys [default-active fade-end-percentage]
-    :or   {fade-end-percentage 0.8}}]
-  (let [active-tab-id (reagent/atom default-active)
-        fading        (reagent/atom {:fade-end-percentage fade-end-percentage})
-        flat-list-ref (atom nil)]
-    (fn
-      [{:keys [data
-               fade-end-percentage
-               fade-end?
-               on-change
-               on-scroll
-               scroll-event-throttle
-               scrollable?
-               scroll-on-press?
-               size
-               type
-               labelled?
-               disabled?
-               blurred?
-               icon-color]
-        :or   {fade-end-percentage   fade-end-percentage
-               fade-end?             false
-               scroll-event-throttle 64
-               scrollable?           false
-               scroll-on-press?      false
-               size                  default-tab-size}
-        :as   props}]
-      (let [maybe-mask-wrapper (if fade-end?
-                                 [react/masked-view
-                                  {:mask-element (reagent/as-element
-                                                  [react/linear-gradient
-                                                   {:colors         [:black :transparent]
-                                                    :locations      [(get @fading :fade-end-percentage)
-                                                                     1]
-                                                    :start          {:x 0 :y 0}
-                                                    :end            {:x 1 :y 0}
-                                                    :pointer-events :none
-                                                    :style          {:width  "100%"
-                                                                     :height "100%"}}])}]
-                                 [:<>])]
-        (if scrollable?
-          (conj
-           maybe-mask-wrapper
-           [rn/flat-list
-            (merge (dissoc props
-                           :default-active
-                           :fade-end-percentage
-                           :fade-end?
-                           :on-change
-                           :scroll-on-press?
-                           :size)
-                   (when scroll-on-press?
-                     {:initial-scroll-index (utils/first-index #(= @active-tab-id (:id %)) data)})
-                   {:ref #(reset! flat-list-ref %)
-                    :extra-data (str @active-tab-id)
-                    :horizontal true
-                    :scroll-event-throttle scroll-event-throttle
-                    :shows-horizontal-scroll-indicator false
-                    :data data
-                    :key-fn (comp str :id)
-                    :on-scroll (fn [^js e]
-                                 (when fade-end?
-                                   (let [offset-x       (oget e "nativeEvent.contentOffset.x")
-                                         content-width  (oget e "nativeEvent.contentSize.width")
-                                         layout-width   (oget e "nativeEvent.layoutMeasurement.width")
-                                         new-percentage (calculate-fade-end-percentage
-                                                         {:offset-x            offset-x
-                                                          :content-width       content-width
-                                                          :layout-width        layout-width
-                                                          :max-fade-percentage fade-end-percentage})]
-                                     ;; Avoid unnecessary re-rendering.
-                                     (when (not= new-percentage (get @fading :fade-end-percentage))
-                                       (swap! fading assoc :fade-end-percentage new-percentage))))
-                                 (when on-scroll
-                                   (on-scroll e)))
-                    :render-fn (fn [{:keys [id label resource]} index]
-                                 [rn/view
-                                  {:style {:margin-right  (if (= size default-tab-size) 12 8)
-                                           :padding-right (when (= index (dec (count data)))
-                                                            (get-in props [:style :padding-left]))}}
-                                  [tag/tag
-                                   {:id         id
-                                    :size       size
-                                    :active     (= id @active-tab-id)
-                                    :resource   resource
-                                    :blurred?   blurred?
-                                    :icon-color icon-color
-                                    :disabled?  disabled?
-                                    :label      label
-                                    :type       type
-                                    :labelled?  labelled?
-                                    :on-press   (fn [id]
-                                                  (reset! active-tab-id id)
-                                                  (when scroll-on-press?
-                                                    (.scrollToIndex @flat-list-ref
-                                                                    #js
-                                                                     {:animated     true
-                                                                      :index        index
-                                                                      :viewPosition 0.5}))
-                                                  (when on-change
-                                                    (on-change id)))}
-                                   label]])})])
-          [rn/view {:style {:flex-direction :row}}
-           (for [{:keys [label id resource]} data]
-             ^{:key id}
-             [rn/view {:style {:margin-right 8}}
-              [tag/tag
-               (merge {:id         id
-                       :size       size
-                       :type       type
-                       :label      (if labelled? label (when (= type :label) label))
-                       :active     (= id active-tab-id)
-                       :disabled?  disabled?
-                       :blurred?   blurred?
-                       :icon-color icon-color
-                       :labelled?  (if (= type :label) true labelled?)
-                       :resource   (if (= type :icon)
-                                     :i/placeholder
-                                     resource)
-                       :on-press   #(do (reset! active-tab-id %)
-                                        (when on-change (on-change %)))})]])])))))
+  [{:keys [default-active on-change]}]
+  (let [active-tab-id (reagent/atom default-active)]
+    (fn [{:keys [data size type labelled disabled blurred icon-color] :or {size 32}}]
+      (let [active-id @active-tab-id]
+        [rn/view {:flex-direction :row}
+         (for [{:keys [tag-label id resource]} data]
+           ^{:key id}
+           [rn/view {:margin-right 8}
+            [tag/tag
+             (merge {:id         id
+                     :size       size
+                     :type       type
+                     :label      (if labelled tag-label (when (= type :label) tag-label))
+                     :active     (= id active-id)
+                     :disabled   disabled
+                     :blurred    blurred
+                     :icon-color icon-color
+                     :labelled   (if (= type :label) true labelled)
+                     :resource   (if (= type :icon)
+                                   :i/placeholder
+                                   resource)
+                     :on-press   #(do (reset! active-tab-id %)
+                                      (when on-change (on-change %)))})]])]))))

src/quo2/core.cljs

@@ -78,6 +78,7 @@
 (def audio-tag quo2.components.tags.context-tags/audio-tag)
 (def community-tag quo2.components.tags.context-tags/community-tag)
 (def tabs quo2.components.tabs.tabs/tabs)
+(def scrollable-tabs quo2.components.tabs.tabs/scrollable-tabs)
 (def account-selector quo2.components.tabs.account-selector/account-selector)
 (def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
 (def status-tag quo2.components.tags.status-tags/status-tag)

src/quo2/core_spec.cljs

@@ -1,10 +1,9 @@
 (ns quo2.core-spec
-  (:require [quo2.components.banners.banner.component-spec]
+  (:require [quo2.components.banners.--tests--.banner-component-spec]
             [quo2.components.buttons.--tests--.buttons-component-spec]
             [quo2.components.counter.--tests--.counter-component-spec]
             [quo2.components.dividers.--tests--.divider-label-component-spec]
             [quo2.components.drawers.--tests--.action-drawers-component-spec]
-            [quo2.components.drawers.permission-context.--tests--.permission-context-component-spec]
             [quo2.components.markdown.--tests--.text-component-spec]
             [quo2.components.selectors.--tests--.selectors-component-spec]
             [quo2.components.selectors.filter.component-spec]))

src/react_native/core.cljs

@@ -101,4 +101,4 @@
   [f]
   (let [fn-ref (use-ref f)]
     (oops/oset! fn-ref "current" f)
-    (use-effect-once (fn [] (fn [] (oops/ocall! fn-ref "current"))))))
+    (use-effect-once (fn [] #((oops/oget fn-ref "current"))))))

src/react_native/reanimated.cljs

@@ -54,13 +54,11 @@
 ;; Helper functions
 (defn get-shared-value
   [anim]
-  (when anim
-    (.-value anim)))
+  (.-value anim))
 
 (defn set-shared-value
   [anim val]
-  (when anim
-    (set! (.-value anim) val)))
+  (set! (.-value anim) val))
 
 (defn kebab-case->camelCase
   [k]

src/status_im/chat/models.cljs

@@ -19,8 +19,7 @@
             [status-im2.contexts.chat.messages.delete-message-for-me.events :as delete-for-me]
             [status-im2.contexts.chat.messages.delete-message.events :as delete-message]
             [status-im2.navigation.events :as navigation]
-            [taoensso.timbre :as log]
-            status-im2.common.bottom-sheet.view))
+            [taoensso.timbre :as log]))
 
 (defn chats
   []
@@ -221,17 +220,11 @@
 
 (rf/defn close-chat
   {:events [:close-chat]}
-  [{:keys [db] :as cofx} navigate-to-shell?]
+  [{:keys [db] :as cofx}]
   (when-let [chat-id (:current-chat-id db)]
     (chat.state/reset-visible-item)
     (rf/merge cofx
-              (merge
-               {:db (dissoc db :current-chat-id)}
-               (let [community-id (get-in db [:chats chat-id :community-id])]
-                 ;; When navigating back from community chat to community, update switcher card
-                 (when (and community-id (not navigate-to-shell?))
-                   {:dispatch [:shell/add-switcher-card
-                               :community {:community-id community-id}]})))
+              {:db (dissoc db :current-chat-id)}
               (delete-for-me/sync-all)
               (delete-message/send-all)
               (offload-messages chat-id))))
@@ -250,8 +243,7 @@
   [{:keys [db now] :as cofx} chat-id]
   (rf/merge cofx
             {:clear-message-notifications
-             [[chat-id] (get-in db [:multiaccount :remote-push-notifications-enabled?])]
-             :dispatch                    [:shell/close-switcher-card chat-id]}
+             [[chat-id] (get-in db [:multiaccount :remote-push-notifications-enabled?])]}
             (deactivate-chat chat-id)
             (offload-messages chat-id)))
 
@@ -276,7 +268,7 @@
             (navigation/change-tab :chat)
             (when-not (= (:view-id db) :community)
               (navigation/pop-to-root-tab :chat-stack))
-            (close-chat false)
+            (close-chat)
             (force-close-chat chat-id)
             (fn [{:keys [db]}]
               {:db (assoc db :current-chat-id chat-id)})
@@ -292,7 +284,7 @@
             {:dispatch [:navigate-to-nav2 :chat chat-id from-shell?]}
             (when-not (= (:view-id db) :community)
               (navigation/pop-to-root-tab :shell-stack))
-            (close-chat false)
+            (close-chat)
             (force-close-chat chat-id)
             (fn [{:keys [db]}]
               {:db (assoc db :current-chat-id chat-id)})
@@ -319,7 +311,7 @@
                  (assoc-in [:chats chat-id] chat)
                  :always
                  (update :chats-home-list conj chat-id))
-     :dispatch [:chat.ui/navigate-to-chat-nav2 chat-id]}))
+     :dispatch [:chat.ui/navigate-to-chat chat-id]}))
 
 (rf/defn navigate-to-user-pinned-messages
   "Takes coeffects map and chat-id, returns effects necessary for navigation and preloading data"
@@ -454,7 +446,7 @@
     :content             (i18n/label :t/clear-history-confirmation-content)
     :confirm-button-text (i18n/label :t/clear-history-action)
     :on-accept           #(do
-                            (re-frame/dispatch-sync [:dismiss-bottom-sheet])
+                            (re-frame/dispatch [:bottom-sheet/hide])
                             (re-frame/dispatch [:chat.ui/clear-history chat-id false]))}})
 
 (rf/defn gaps-failed
@@ -523,7 +515,7 @@
     :content             (i18n/label :t/delete-chat-confirmation)
     :confirm-button-text (i18n/label :t/delete)
     :on-accept           #(do
-                            (re-frame/dispatch-sync [:dismiss-bottom-sheet])
+                            (re-frame/dispatch [:bottom-sheet/hide])
                             (re-frame/dispatch [:chat.ui/remove-chat chat-id]))}})
 
 (rf/defn decrease-unviewed-count

src/status_im/chat/models/input.cljs

@@ -49,10 +49,9 @@
         cursor      (+ at-sign-idx (count name) 2)]
     (rf/merge
      cofx
-     {:db                   (-> db
-                                (assoc-in [:chats/cursor chat-id] cursor)
-                                (assoc-in [:chats/mention-suggestions chat-id] nil))
-      :set-text-input-value [chat-id new-text text-input-ref]}
+     {:db (-> db
+              (assoc-in [:chats/cursor chat-id] cursor)
+              (assoc-in [:chats/mention-suggestions chat-id] nil))}
      (set-chat-input-text new-text chat-id)
      ;; NOTE(rasom): Some keyboards do not react on selection property passed to
      ;; text input (specifically Samsung keyboard with predictive text set on).

src/status_im/chat/models/message_list.cljs

@@ -1,8 +1,8 @@
 (ns status-im.chat.models.message-list
   (:require ["functional-red-black-tree" :as rb-tree]
             [status-im.constants :as constants]
-            [utils.datetime :as datetime]
-            [utils.re-frame :as rf]))
+            [utils.re-frame :as rf]
+            [utils.datetime :as datetime]))
 
 (defn- add-datemark
   [{:keys [whisper-timestamp] :as msg}]
@@ -20,7 +20,6 @@
            from
            outgoing
            whisper-timestamp
-           deleted?
            deleted-for-me?
            albumize?]}]
   (-> {:whisper-timestamp whisper-timestamp
@@ -30,7 +29,6 @@
                            (or
                             (= constants/message-type-private-group-system-message
                                message-type)
-                            deleted?
                             deleted-for-me?))
        :clock-value       clock-value
        :type              :message

src/status_im/communities/core.cljs

@@ -4,7 +4,6 @@
             [clojure.walk :as walk]
             [quo.design-system.colors :as colors]
             [re-frame.core :as re-frame]
-            [i18n.i18n :as i18n]
             [status-im.async-storage.core :as async-storage]
             [status-im.bottom-sheet.core :as bottom-sheet]
             [status-im.constants :as constants]
@@ -12,7 +11,6 @@
             [utils.re-frame :as rf]
             [status-im.utils.universal-links.core :as universal-links]
             [status-im2.contexts.activity-center.events :as activity-center]
-            [status-im2.common.toasts.events :as toasts]
             [status-im2.navigation.events :as navigation]
             [taoensso.timbre :as log]))
 
@@ -112,28 +110,15 @@
 (rf/defn left
   {:events [::left]}
   [cofx response-js]
-  (let [community-name (aget response-js "communities" 0 "name")]
-    (rf/merge cofx
-              (handle-response cofx response-js)
-              (toasts/upsert {:icon       :placeholder
-                              :icon-color (:positive-01 @colors/theme)
-                              :text       (i18n/label :t/left-community {:community community-name})})
-              (navigation/navigate-back)
-              (activity-center/notifications-fetch-unread-count))))
+  (rf/merge cofx
+            (handle-response cofx response-js)
+            (navigation/pop-to-root-tab :chat-stack)
+            (activity-center/notifications-fetch-unread-count)))
 
 (rf/defn joined
   {:events [::joined ::requested-to-join]}
   [cofx response-js]
-  (let [[event-name _] (:event cofx)
-        community-name (aget response-js "communities" 0 "name")]
-    (rf/merge cofx
-              (handle-response cofx response-js)
-              (toasts/upsert {:icon       :placeholder
-                              :icon-color (:positive-01 @colors/theme)
-                              :text       (i18n/label (if (= event-name ::joined)
-                                                        :t/joined-community
-                                                        :t/requested-to-join-community)
-                                                      {:community community-name})}))))
+  (handle-response cofx response-js))
 
 (rf/defn export
   {:events [::export-pressed]}
@@ -187,7 +172,6 @@
                                 (keys (get-in db [:communities community-id :chats])))]
     {:clear-message-notifications [community-chat-ids
                                    (get-in db [:multiaccount :remote-push-notifications-enabled?])]
-     :dispatch                    [:shell/close-switcher-card community-id]
      :json-rpc/call               [{:method      "wakuext_leaveCommunity"
                                     :params      [community-id]
                                     :js-response true

src/status_im/contact/block.cljs

@@ -47,7 +47,6 @@
                                              (update :chats dissoc public-key)
                                              (update :chats-home-list disj public-key)
                                              (assoc-in [:contacts/contacts public-key :added] false))
-            :dispatch                    [:shell/close-switcher-card public-key]
             :clear-message-notifications
             [[public-key] (get-in db [:multiaccount :remote-push-notifications-enabled?])]}
            (activity-center/notifications-fetch-unread-count)

src/status_im/contact/core.cljs

@@ -4,6 +4,7 @@
             [status-im.contact.block :as contact.block]
             [status-im.contact.db :as contact.db]
             [status-im.data-store.contacts :as contacts-store]
+            [status-im.multiaccounts.update.core :as multiaccounts.update]
             [utils.re-frame :as rf]
             [status-im2.navigation.events :as navigation]
             [taoensso.timbre :as log]))
@@ -150,6 +151,15 @@
              #(re-frame/dispatch [:sanitize-messages-and-process-response %]))
             (navigation/navigate-back)))
 
+(rf/defn switch-mutual-contact-requests-enabled
+  {:events [:multiaccounts.ui/switch-mutual-contact-requests-enabled]}
+  [cofx enabled?]
+  (multiaccounts.update/multiaccount-update
+   cofx
+   :mutual-contact-enabled?
+   enabled?
+   nil))
+
 (rf/defn set-search-query
   {:events [:contacts/set-search-query]}
   [{:keys [db] :as cofx} value]

src/status_im/contact/db.cljs

@@ -86,9 +86,8 @@
   (get-in db [:contacts/contacts public-key]))
 
 (defn added?
-  ([{:keys [contact-request-state]}]
-   (or (= constants/contact-request-state-mutual contact-request-state)
-       (= constants/contact-request-state-sent contact-request-state)))
+  ([contact]
+   (:added contact))
   ([db public-key]
    (added? (get-in db [:contacts/contacts public-key]))))
 
@@ -99,28 +98,27 @@
    (blocked? (get-in db [:contacts/contacts public-key]))))
 
 (defn active?
-  "Checks that we are mutual contacts"
+  "Checks that the user is added to the contact and not blocked"
   ([contact]
-   (and (= constants/contact-request-state-mutual
-           (:contact-request-state contact))
+   (and (:added contact)
         (not (:blocked contact))))
   ([db public-key]
    (active? (get-in db [:contacts/contacts public-key]))))
 
 (defn enrich-contact
   ([contact] (enrich-contact contact nil nil))
-  ([{:keys [public-key] :as contact} setting own-public-key]
+  ([{:keys [added public-key] :as contact} setting own-public-key]
    (cond-> (-> contact
                (dissoc :ens-verified-at :ens-verification-retries)
                (assoc :blocked? (:blocked contact)
                       :active?  (active? contact)
-                      :added?   (added? contact))
+                      :added?   added)
                (multiaccounts/contact-with-names))
      (and setting
           (not= public-key own-public-key)
           (or (= setting constants/profile-pictures-visibility-none)
               (and (= setting constants/profile-pictures-visibility-contacts-only)
-                   (not (added? contact)))))
+                   (not added))))
      (dissoc :images))))
 
 (defn enrich-contacts

src/status_im/events.cljs

@@ -58,8 +58,7 @@
    status-im.wallet.custom-tokens.core
    status-im2.contexts.activity-center.events
    status-im2.contexts.shell.events
-   [status-im2.navigation.events :as navigation]
-   [react-native.background-timer :as timer]))
+   [status-im2.navigation.events :as navigation]))
 
 (re-frame/reg-fx
  :dismiss-keyboard
@@ -325,57 +324,3 @@
     {::async-storage/get {:keys keys
                           :cb   #(re-frame/dispatch
                                   [:information-box-states-loaded hashes %])}}))
-
-(rf/defn reset-bottom-sheet
-  {:events [:bottom-sheet/reset]}
-  [{:keys [db]}]
-  {:db (assoc db
-              :bottom-sheet/config
-              {:content-height      nil
-               :show-bottom-sheet?  nil
-               :keyboard-was-shown? false
-               :expanded?           false
-               :gesture-running?    false
-               :animation-delay     450})})
-
-(re-frame/reg-fx
- :dismiss-bottom-sheet-fx
- (fn [[on-cancel animation-delay]]
-   (re-frame/dispatch [:bottom-sheet/show-quo2-bottom-sheet false])
-   (when (fn? on-cancel) (on-cancel))
-   (timer/set-timeout
-    (fn []
-      (re-frame/dispatch [:bottom-sheet/hide-navigation-overlay])
-      (re-frame/dispatch [:bottom-sheet/reset]))
-    (or animation-delay 450))))
-
-(rf/defn dismiss-bottom-sheet
-  {:events [:dismiss-bottom-sheet]}
-  [{:keys [db]} on-cancel]
-  (let [animation-delay (get-in db [:bottom-sheet/config :animation-delay])]
-    {:dismiss-bottom-sheet-fx [on-cancel animation-delay]}))
-
-(rf/defn update-bottom-sheet-height
-  {:events [:bottom-sheet/update-height]}
-  [{:keys [db]} height]
-  {:db (assoc-in db [:bottom-sheet/config :content-height] height)})
-
-(rf/defn show-bottom-sheet
-  {:events [:bottom-sheet/show-quo2-bottom-sheet]}
-  [{:keys [db]} value]
-  {:db (assoc-in db [:bottom-sheet/config :show-bottom-sheet?] value)})
-
-(rf/defn keyboard-was-shown?
-  {:events [:bottom-sheet/keyboard-was-shown?]}
-  [{:keys [db]} value]
-  {:db (assoc-in db [:bottom-sheet/config :keyboard-was-shown?] value)})
-
-(rf/defn bottom-sheet-did-expand
-  {:events [:bottom-sheet/did-expand]}
-  [{:keys [db]} value]
-  {:db (assoc-in db [:bottom-sheet/config :expanded?] value)})
-
-(rf/defn bottom-sheet-gesture-running?
-  {:events [:bottom-sheet/gesture-running?]}
-  [{:keys [db]} value]
-  {:db (assoc-in db [:bottom-sheet/config :gesture-running?] value)})

src/status_im/group_chats/core.cljs

@@ -14,7 +14,7 @@
   {:events [:navigate-chat-updated]}
   [cofx chat-id]
   (when (get-in cofx [:db :chats chat-id])
-    (models.chat/navigate-to-chat-nav2 cofx chat-id nil)))
+    (models.chat/navigate-to-chat cofx chat-id)))
 
 (rf/defn handle-chat-removed
   {:events [:chat-removed]}
@@ -71,7 +71,7 @@
 (rf/defn create-from-link
   [cofx {:keys [chat-id invitation-admin chat-name]}]
   (if (get-in cofx [:db :chats chat-id])
-    {:dispatch [:chat.ui/navigate-to-chat-nav2 chat-id]}
+    {:dispatch [:chat.ui/navigate-to-chat chat-id]}
     {:json-rpc/call [{:method      "wakuext_createGroupChatFromInvitation"
                       :params      [chat-name chat-id invitation-admin]
                       :js-response true
@@ -208,11 +208,6 @@
   [{:keys [db]} id]
   {:db (update db :group/selected-contacts conj id)})
 
-(rf/defn clear-contacts
-  {:events [:clear-contacts]}
-  [{:keys [db]} id]
-  {:db (assoc db :group/selected-contacts #{})})
-
 (rf/defn deselect-participant
   {:events [:deselect-participant]}
   [{:keys [db]} id]

src/status_im/integration_test.cljs

@@ -251,7 +251,7 @@
          (rf/dispatch-sync [:chat.ui/start-chat chat-id]) ;; start a new chat
          (rf-test/wait-for
            [:status-im.chat.models/one-to-one-chat-created]
-           (rf/dispatch-sync [:chat.ui/navigate-to-chat-nav2 chat-id])
+           (rf/dispatch-sync [:chat.ui/navigate-to-chat chat-id])
            (is (= chat-id @(rf/subscribe [:chats/current-chat-id])))
            (logout!)
            (rf-test/wait-for [::logout/logout-method] ; we need to logout to make sure the node is not in
@@ -276,7 +276,7 @@
          (rf/dispatch-sync [:chat.ui/start-chat chat-id]) ;; start a new chat
          (rf-test/wait-for
            [:status-im.chat.models/one-to-one-chat-created]
-           (rf/dispatch-sync [:chat.ui/navigate-to-chat-nav2 chat-id])
+           (rf/dispatch-sync [:chat.ui/navigate-to-chat chat-id])
            (is (= chat-id @(rf/subscribe [:chats/current-chat-id])))
            (is @(rf/subscribe [:chats/chat chat-id]))
            (rf/dispatch-sync [:chat.ui/remove-chat-pressed chat-id])
@@ -307,7 +307,7 @@
          (rf/dispatch-sync [:chat.ui/start-chat chat-id]) ;; start a new chat
          (rf-test/wait-for
            [:status-im.chat.models/one-to-one-chat-created]
-           (rf/dispatch-sync [:chat.ui/navigate-to-chat-nav2 chat-id])
+           (rf/dispatch-sync [:chat.ui/navigate-to-chat chat-id])
            (is (= chat-id @(rf/subscribe [:chats/current-chat-id])))
            (is @(rf/subscribe [:chats/chat chat-id]))
            (rf/dispatch-sync [::chat.models/mute-chat-toggled chat-id true])

src/status_im/multiaccounts/login/core.cljs

@@ -424,7 +424,7 @@
          :key-uid
          (fn [stored-key-uid]
            (when (= stored-key-uid key-uid)
-             (re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id])))))))))
+             (re-frame/dispatch [:chat.ui/navigate-to-chat chat-id])))))))))
 
 (rf/defn check-last-chat
   {:events [::check-last-chat]}

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

@@ -14,7 +14,8 @@
            transactions-management-enabled?
            wakuv2-flag
            current-fleet
-           webview-debug]}]
+           webview-debug
+           mutual-contact-requests-enabled?]}]
   (keep
    identity
    [{:size                 :small
@@ -114,7 +115,17 @@
      #(re-frame/dispatch
        [:multiaccounts.ui/waku-bloom-filter-mode-switched (not waku-bloom-filter-mode)])
      :accessory               :switch
-     :active                  waku-bloom-filter-mode}]))
+     :active                  waku-bloom-filter-mode}
+    {:size                    :small
+     :title                   (i18n/label :t/mutual-contact-requests)
+     :accessibility-label     :mutual-contact-requests-switch
+     :container-margin-bottom 8
+     :on-press
+     #(re-frame/dispatch
+       [:multiaccounts.ui/switch-mutual-contact-requests-enabled
+        (not mutual-contact-requests-enabled?)])
+     :accessory               :switch
+     :active                  mutual-contact-requests-enabled?}]))
 
 (defn- flat-list-data
   [options]
@@ -135,7 +146,8 @@
                   communities-enabled?             [:communities/enabled?]
                   transactions-management-enabled? [:wallet/transactions-management-enabled?]
                   current-log-level                [:log-level/current-log-level]
-                  current-fleet                    [:fleets/current-fleet]]
+                  current-fleet                    [:fleets/current-fleet]
+                  mutual-contact-requests-enabled? [:mutual-contact-requests/enabled?]]
     [list/flat-list
      {:data      (flat-list-data
                   {:network-name                     network-name
@@ -146,6 +158,7 @@
                    :dev-mode?                        false
                    :wakuv2-flag                      wakuv2-flag
                    :waku-bloom-filter-mode           waku-bloom-filter-mode
-                   :webview-debug                    webview-debug})
+                   :webview-debug                    webview-debug
+                   :mutual-contact-requests-enabled? mutual-contact-requests-enabled?})
       :key-fn    (fn [_ i] (str i))
       :render-fn render-item}]))

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

@@ -7,17 +7,11 @@
             [status-im.ui.screens.multiaccounts.key-storage.views :as key-storage]
             [status-im.ui.screens.multiaccounts.recover.views :as recover.views]
             [status-im2.common.bottom-sheet.view :as bottom-sheet]
-            [status-im2.contexts.chat.messages.pin.list.view :as pin.list]
-            [reagent.core :as reagent]
-            [status-im2.contexts.chat.messages.drawers.view :as drawers]
-            [status-im.ui.components.react :as react]
-            [status-im.ui.screens.multiaccounts.sheets :as multiaccounts-sheet]))
+            [status-im2.contexts.chat.messages.pin.list.view :as pin.list]))
 
 (defn bottom-sheet
   []
-  (let [dismiss-bottom-sheet-callback #(re-frame/dispatch-sync [:dismiss-bottom-sheet])
-        {:keys [show-bottom-sheet?]} @(re-frame/subscribe [:bottom-sheet/config])
-        {:keys [show? view options]} @(re-frame/subscribe [:bottom-sheet])
+  (let [{:keys [show? view options]} @(re-frame/subscribe [:bottom-sheet])
         {:keys [content]
          :as   opts}
         (cond-> {:visible? show?}
@@ -52,22 +46,7 @@
           (merge key-storage/migrate-account-password)
 
           (= view :pinned-messages-list)
-          (merge {:content pin.list/pinned-messages-list})
-
-          (= view :drawer/reactions)
-          (merge {:content drawers/reactions})
-
-          (= view :generate-a-new-key)
-          (merge {:content multiaccounts-sheet/actions-sheet}))]
-    (reagent/create-class
-     {:reagent-render         (fn []
-                                [bottom-sheet/bottom-sheet
-                                 opts
-                                 (when content
-                                   [content (when options options)])])
-      :component-did-mount    (fn []
-                                (react/hw-back-add-listener dismiss-bottom-sheet-callback))
-      :component-will-unmount (fn []
-                                (react/hw-back-remove-listener dismiss-bottom-sheet-callback)
-                                (when show-bottom-sheet?
-                                  (re-frame/dispatch [:bottom-sheet/reset])))})))
+          (merge {:content pin.list/pinned-messages-list}))]
+    [bottom-sheet/bottom-sheet opts
+     (when content
+       [content (when options options)])]))

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

@@ -6,7 +6,7 @@
    [quo.design-system.colors :as colors]
    [quo.react :as quo.react]
    [quo.react-native :as rn]
-   [re-frame.core :as rf]
+   [re-frame.core :as re-frame]
    re-frame.db
    [reagent.core :as reagent]
    [status-im.constants :as constants]
@@ -42,13 +42,13 @@
 
 (defn invitation-requests
   [chat-id admins]
-  (let [current-pk @(rf/subscribe [:multiaccount/public-key])
+  (let [current-pk @(re-frame/subscribe [:multiaccount/public-key])
         admin?     (get admins current-pk)]
     (when admin?
-      (let [invitations @(rf/subscribe [:group-chat/pending-invitations-by-chat-id chat-id])]
+      (let [invitations @(re-frame/subscribe [:group-chat/pending-invitations-by-chat-id chat-id])]
         (when (seq invitations)
           [react/touchable-highlight
-           {:on-press            #(rf/dispatch [:navigate-to :group-chat-invite])
+           {:on-press            #(re-frame/dispatch [:navigate-to :group-chat-invite])
             :accessibility-label :invitation-requests-button}
            [react/view {:style (style/add-contact)}
             [react/text {:style style/add-contact-text}
@@ -56,11 +56,11 @@
 
 (defn add-contact-bar
   [public-key]
-  (when-not (or @(rf/subscribe [:contacts/contact-added? public-key])
-                @(rf/subscribe [:contacts/contact-blocked? public-key]))
+  (when-not (or @(re-frame/subscribe [:contacts/contact-added? public-key])
+                @(re-frame/subscribe [:contacts/contact-blocked? public-key]))
     [react/touchable-highlight
      {:on-press
-      #(rf/dispatch [:contact.ui/add-to-contact-pressed public-key])
+      #(re-frame/dispatch [:contact.ui/add-to-contact-pressed public-key])
       :accessibility-label :add-to-contacts-button}
      [react/view {:style (style/add-contact)}
       [icons/icon :main-icons/add
@@ -69,7 +69,7 @@
 
 (defn contact-request
   []
-  (let [contact-request @(rf/subscribe [:chats/sending-contact-request])]
+  (let [contact-request @(re-frame/subscribe [:chats/sending-contact-request])]
     [react/view {:style style/contact-request}
      [react/image
       {:source (resources/get-image :hand-wave)
@@ -92,7 +92,7 @@
         [quo/button
          {:style               {:width "100%"}
           :accessibility-label :contact-request--button
-          :on-press            #(rf/dispatch [:chat.ui/send-contact-request])}
+          :on-press            #(re-frame/dispatch [:chat.ui/send-contact-request])}
          (i18n/label :t/contact-request)]])]))
 
 (defn chat-intro
@@ -101,6 +101,7 @@
            chat-type
            group-chat
            invitation-admin
+           mutual-contact-requests-enabled?
            contact-name
            color
            loading-messages?
@@ -135,23 +136,25 @@
        :no-messages?      no-messages?}]
      [react/text {:style (assoc style/intro-header-description :margin-bottom 32)}
       (str (i18n/label :t/empty-chat-description-one-to-one) contact-name)])
-   (when
-     (= chat-type constants/one-to-one-chat-type)
-     (or (= contact-request-state constants/contact-request-state-none)
-         (= contact-request-state constants/contact-request-state-received)
-         (= contact-request-state constants/contact-request-state-dismissed)))
-   [contact-request]])
+   (when (and mutual-contact-requests-enabled?
+              (= chat-type constants/one-to-one-chat-type)
+              (or (= contact-request-state constants/contact-request-state-none)
+                  (= contact-request-state constants/contact-request-state-received)
+                  (= contact-request-state constants/contact-request-state-dismissed)))
+     [contact-request])])
 
 (defn chat-intro-one-to-one
   [{:keys [chat-id] :as opts}]
-  (let [contact       @(rf/subscribe [:contacts/contact-by-identity chat-id])
-        contact-names @(rf/subscribe [:contacts/contact-two-names-by-identity
-                                      chat-id])]
+  (let [contact                          @(re-frame/subscribe [:contacts/contact-by-identity chat-id])
+        mutual-contact-requests-enabled? @(re-frame/subscribe [:mutual-contact-requests/enabled?])
+        contact-names                    @(re-frame/subscribe [:contacts/contact-two-names-by-identity
+                                                               chat-id])]
     [chat-intro
      (assoc opts
-            :contact-name          (first contact-names)
-            :contact-request-state (or (:contact-request-state contact)
-                                       constants/contact-request-state-none))]))
+            :mutual-contact-requests-enabled? mutual-contact-requests-enabled?
+            :contact-name                     (first contact-names)
+            :contact-request-state            (or (:contact-request-state contact)
+                                                  constants/contact-request-state-none))]))
 
 (defn chat-intro-header-container
   [{:keys [group-chat invitation-admin
@@ -214,8 +217,8 @@
 (defn invitation-bar
   [chat-id]
   (let [{:keys [state chat-id] :as invitation}
-        (first @(rf/subscribe [:group-chat/invitations-by-chat-id chat-id]))
-        {:keys [retry? message]}               @(rf/subscribe [:chats/current-chat-membership])
+        (first @(re-frame/subscribe [:group-chat/invitations-by-chat-id chat-id]))
+        {:keys [retry? message]}               @(re-frame/subscribe [:chats/current-chat-membership])
         message-length                         (count message)]
     [react/view {:margin-horizontal 16 :margin-top 10}
      (cond
@@ -235,13 +238,13 @@
          [quo/button
           {:type                :secondary
            :accessibility-label :retry-button
-           :on-press            #(rf/dispatch [:group-chats.ui/membership-retry])}
+           :on-press            #(re-frame/dispatch [:group-chats.ui/membership-retry])}
           (i18n/label :t/mailserver-retry)]
          :left
          [quo/button
           {:type                :secondary
            :accessibility-label :remove-group-button
-           :on-press            #(rf/dispatch [:group-chats.ui/remove-chat-confirmed chat-id])}
+           :on-press            #(re-frame/dispatch [:group-chats.ui/remove-chat-confirmed chat-id])}
           (i18n/label :t/remove-group)]}]
        :else
        [toolbar/toolbar
@@ -252,7 +255,7 @@
            :accessibility-label :introduce-yourself-button
            :disabled            (or (string/blank? message)
                                     (> message-length chat.group/message-max-length))
-           :on-press            #(rf/dispatch [:send-group-chat-membership-request])}
+           :on-press            #(re-frame/dispatch [:send-group-chat-membership-request])}
           (i18n/label :t/request-membership)]}])]))
 
 (defn get-space-keeper-ios
@@ -286,9 +289,9 @@
 
 (defn list-footer
   [{:keys [chat-id] :as chat}]
-  (let [loading-messages? @(rf/subscribe [:chats/loading-messages? chat-id])
-        no-messages?      @(rf/subscribe [:chats/chat-no-messages? chat-id])
-        all-loaded?       @(rf/subscribe [:chats/all-loaded? chat-id])]
+  (let [loading-messages? @(re-frame/subscribe [:chats/loading-messages? chat-id])
+        no-messages?      @(re-frame/subscribe [:chats/chat-no-messages? chat-id])
+        all-loaded?       @(re-frame/subscribe [:chats/all-loaded? chat-id])]
     [react/view {:style (when platform/android? {:scaleY -1})}
      (if (or loading-messages? (not chat-id) (not all-loaded?))
        [react/view {:height 324 :align-items :center :justify-content :center}
@@ -337,15 +340,15 @@
 (defn list-on-end-reached
   []
   (if @state/scrolling
-    (rf/dispatch [:chat.ui/load-more-messages-for-current-chat])
-    (utils/set-timeout #(rf/dispatch [:chat.ui/load-more-messages-for-current-chat])
+    (re-frame/dispatch [:chat.ui/load-more-messages-for-current-chat])
+    (utils/set-timeout #(re-frame/dispatch [:chat.ui/load-more-messages-for-current-chat])
                        (if platform/low-device? 700 200))))
 
 (defn get-render-data
   [{:keys [group-chat chat-id public? community-id admins space-keeper show-input? edit-enabled
            in-pinned-view?]}]
-  (let [current-public-key  @(rf/subscribe [:multiaccount/public-key])
-        community           @(rf/subscribe [:communities/community community-id])
+  (let [current-public-key  @(re-frame/subscribe [:multiaccount/public-key])
+        community           @(re-frame/subscribe [:communities/community community-id])
         group-admin?        (get admins current-public-key)
         community-admin?    (when community (community :admin))
         message-pin-enabled (and (not public?)
@@ -368,15 +371,17 @@
   [{:keys [chat
            bottom-space
            pan-responder
+           mutual-contact-requests-enabled?
            space-keeper
            show-input?]}]
   (let [{:keys [group-chat chat-type chat-id public? community-id admins]} chat
 
-        messages @(rf/subscribe [:chats/raw-chat-messages-stream chat-id])
+        messages @(re-frame/subscribe [:chats/raw-chat-messages-stream chat-id])
         one-to-one? (= chat-type constants/one-to-one-chat-type)
-        contact-added? (when one-to-one? @(rf/subscribe [:contacts/contact-added? chat-id]))
+        contact-added? (when one-to-one? @(re-frame/subscribe [:contacts/contact-added? chat-id]))
         should-send-contact-request?
         (and
+         mutual-contact-requests-enabled?
          one-to-one?
          (not contact-added?))]
 
@@ -418,13 +423,13 @@
   []
   (when (and (not @navigation.state/curr-modal) (= (get @re-frame.db/app-db :view-id) :chat))
     (react/hw-back-remove-listener navigate-back-handler)
-    (rf/dispatch [:close-chat])
-    (rf/dispatch [:navigate-back])))
+    (re-frame/dispatch [:close-chat])
+    (re-frame/dispatch [:navigate-back])))
 
 (defn topbar-content
   []
-  (let [window-width                               @(rf/subscribe [:dimensions/window-width])
-        {:keys [group-chat chat-id] :as chat-info} @(rf/subscribe [:chats/current-chat])]
+  (let [window-width                               @(re-frame/subscribe [:dimensions/window-width])
+        {:keys [group-chat chat-id] :as chat-info} @(re-frame/subscribe [:chats/current-chat])]
     [react/touchable-highlight
      {:on-press #(when-not group-chat
                    (debounce/dispatch-and-chill [:chat.ui/show-profile chat-id] 1000))
@@ -447,9 +452,9 @@
    [react/view {:flex 1 :left 52 :right 52 :top 0 :bottom 0 :position :absolute}
     [topbar-content]]
    [react/touchable-highlight
-    {:on-press-in         #(rf/dispatch [:bottom-sheet/show-sheet
-                                         {:content (fn [] [sheets/current-chat-actions])
-                                          :height  256}])
+    {:on-press-in         #(re-frame/dispatch [:bottom-sheet/show-sheet
+                                               {:content (fn [] [sheets/current-chat-actions])
+                                                :height  256}])
      :accessibility-label :chat-menu-button
      :style               {:right           0
                            :top             0
@@ -476,28 +481,26 @@
         set-active-panel (get-set-active-panel active-panel)
         on-close         #(set-active-panel nil)]
     (fn []
-      (let [{:keys [chat-id
-                    show-input?
-                    group-chat
-                    admins
-                    invitation-admin]
-             :as   chat}
-            @(rf/subscribe [:chats/current-chat-chat-view])
-            max-bottom-space (max @bottom-space
-                                  @panel-space)]
+      (let [{:keys [chat-id show-input? group-chat admins invitation-admin] :as chat}
+            ;;we want to react only on these fields, do not use full chat map here
+            @(re-frame/subscribe [:chats/current-chat-chat-view])
+            mutual-contact-requests-enabled? @(re-frame/subscribe [:mutual-contact-requests/enabled?])
+            max-bottom-space (max @bottom-space @panel-space)]
         [:<>
          [topbar]
          [connectivity/loading-indicator]
          (when chat-id
-           (when group-chat
-             [invitation-requests chat-id admins]))
+           (if group-chat
+             [invitation-requests chat-id admins]
+             (when-not mutual-contact-requests-enabled? [add-contact-bar chat-id])))
          ;;MESSAGES LIST
          [messages-view
-          {:chat          chat
-           :bottom-space  max-bottom-space
-           :pan-responder pan-responder
-           :space-keeper  space-keeper
-           :show-input?   show-input?}]
+          {:chat                             chat
+           :bottom-space                     max-bottom-space
+           :pan-responder                    pan-responder
+           :mutual-contact-requests-enabled? mutual-contact-requests-enabled?
+           :space-keeper                     space-keeper
+           :show-input?                      show-input?}]
          (when (and group-chat invitation-admin)
            [accessory/view
             {:y               position-y

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

@@ -48,7 +48,7 @@
     :on-press      (fn []
                      (rf/dispatch [:communities/load-category-states id])
                      (rf/dispatch [:dismiss-keyboard])
-                     (rf/dispatch [:navigate-to-nav2 :community {:community-id id}]))
+                     (rf/dispatch [:navigate-to :community {:community-id id}]))
     :on-long-press #(rf/dispatch [:bottom-sheet/show-sheet
                                   {:content (fn []
                                               [community/community-actions community])}])}
@@ -111,7 +111,7 @@
                                      (i18n/label :t/open-membership))]]
       :on-press                  #(do
                                     (rf/dispatch [:dismiss-keyboard])
-                                    (rf/dispatch [:navigate-to-nav2 :community {:community-id id}]))}]))
+                                    (rf/dispatch [:navigate-to :community {:community-id id}]))}]))
 
 (defn communities-actions
   []

src/status_im/ui/screens/home/sheet/views.cljs

@@ -1,21 +1,19 @@
 (ns status-im.ui.screens.home.sheet.views
-  (:require [i18n.i18n :as i18n]
-            [quo.core :as quo]
-            [quo2.core :as quo2]
+  (:require [quo.core :as quo]
             [quo2.foundations.colors :as colors]
-            [re-frame.core :as re-frame]
-            [react-native.background-timer :as timer]
+            [re-frame.core :as rf]
+            [i18n.i18n :as i18n]
             [status-im.qr-scanner.core :as qr-scanner]
             [status-im.ui.components.invite.views :as invite]
             [status-im.ui.components.react :as rn]
-            [status-im.ui.screens.home.sheet.styles :as style]
             [status-im.ui2.screens.chat.components.new-chat.view :as new-chat-aio]
             [status-im.utils.config :as config]
-            [utils.re-frame :as rf]))
+            [quo2.core :as quo2]
+            [status-im.ui.screens.home.sheet.styles :as style]))
 
-(defn- hide-sheet-and-dispatch
+(defn hide-sheet-and-dispatch
   [event]
-  (re-frame/dispatch-sync [:dismiss-bottom-sheet])
+  (rf/dispatch [:bottom-sheet/hide])
   (rf/dispatch event))
 
 (defn add-new-view
@@ -30,7 +28,7 @@
      {:type                :icon
       :theme               :icon
       :accessibility-label :universal-qr-scanner
-      :on-press            #(rf/dispatch
+      :on-press            #(hide-sheet-and-dispatch
                              [::qr-scanner/scan-code
                               {:handler ::qr-scanner/on-scan-success}])}
      :main-icons/qr]]
@@ -53,59 +51,46 @@
      :accessibility-label :join-public-chat-button
      :icon                :main-icons/public-chat
      :on-press            #(hide-sheet-and-dispatch [:open-modal :new-public-chat])}]
-   (when (rf/sub [:communities/enabled?])
+   (when @(rf/subscribe [:communities/enabled?])
      [quo/list-item
       {:theme               :accent
        :title               (i18n/label :t/communities-alpha)
        :accessibility-label :communities-button
        :icon                :main-icons/communities
-       :on-press            #(rf/dispatch [:navigate-to :communities])}])
+       :on-press            #(hide-sheet-and-dispatch [:navigate-to :communities])}])
    [invite/list-item
     {:accessibility-label :chats-menu-invite-friends-button}]])
 
 (defn new-chat-bottom-sheet
   []
-  (let [{:keys [animation-delay]} (rf/sub [:bottom-sheet/config])]
-    [rn/view
-     [quo2/menu-item
-      {:theme                      :main
-       :title                      (i18n/label :t/new-chat)
-       :icon-bg-color              :transparent
-       :type                       :transparent
-       :container-padding-vertical 12
-       :style-props                {:border-bottom-width 1
-                                    :border-color        (colors/theme-colors colors/neutral-10
-                                                                              colors/neutral-90)}
-       :title-column-style         {:margin-left 2}
-       :icon-color                 (colors/theme-colors colors/neutral-50 colors/neutral-40)
-       :accessibility-label        :start-a-new-chat
-       :icon                       :i/new-message
-       :on-press                   (fn []
-                                     (re-frame/dispatch-sync [:dismiss-bottom-sheet])
-                                     (timer/set-timeout
-                                      #(rf/dispatch [:bottom-sheet/show-sheet :start-a-new-chat])
-                                      (or animation-delay 450)))}]
-     [quo2/menu-item
-      {:theme                        :main
-       :title                        (i18n/label :t/connect-with-users)
-       :icon-bg-color                :transparent
-       :type                         :transparent
-       :icon-container-style         {:padding-horizontal 0}
-       :container-padding-horizontal {:padding-horizontal 4}
-       :style-props                  {:margin-top    18
-                                      :margin-bottom 9}
-       :container-padding-vertical   12
-       :title-column-style           {:margin-left 2}
-       :icon-color                   (colors/theme-colors colors/neutral-50 colors/neutral-40)
-       :accessibility-label          :connect-with-users
-       :subtitle                     (i18n/label :t/enter-a-chat-key)
-       :subtitle-color               colors/neutral-50
-       :icon                         :i/add-user
-       :on-press                     (fn []
-                                       (re-frame/dispatch-sync [:dismiss-bottom-sheet])
-                                       (timer/set-timeout
-                                        #(rf/dispatch [:open-modal :new-contact])
-                                        (or animation-delay 450)))}]]))
+  [rn/view
+   [quo2/menu-item
+    {:theme                      :main
+     :title                      (i18n/label :t/new-chat)
+     :icon-bg-color              :transparent
+     :container-padding-vertical 12
+     :title-column-style         {:margin-left 2}
+     :icon-color                 (colors/theme-colors colors/neutral-50 colors/neutral-40)
+     :accessibility-label        :start-a-new-chat
+     :icon                       :i/new-message
+     :on-press                   #(hide-sheet-and-dispatch [:bottom-sheet/show-sheet
+                                                            :start-a-new-chat])}]
+   [quo2/menu-item
+    {:theme                        :main
+     :title                        (i18n/label :t/add-a-contact)
+     :icon-bg-color                :transparent
+     :icon-container-style         {:padding-horizontal 0}
+     :container-padding-horizontal {:padding-horizontal 4}
+     :style-props                  {:margin-top    18
+                                    :margin-bottom 9}
+     :container-padding-vertical   12
+     :title-column-style           {:margin-left 2}
+     :icon-color                   (colors/theme-colors colors/neutral-50 colors/neutral-40)
+     :accessibility-label          :add-a-contact
+     :subtitle                     (i18n/label :t/enter-a-chat-key)
+     :subtitle-color               colors/neutral-50
+     :icon                         :i/add-user
+     :on-press                     #(hide-sheet-and-dispatch [:open-modal :new-contact])}]])
 
 
 (def new-chat-bottom-sheet-comp

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

@@ -27,6 +27,7 @@
    [status-im.ui.screens.home.styles :as styles]
    [status-im.ui.screens.home.views.inner-item :as inner-item]
    [status-im.utils.utils :as utils]
+   [status-im2.setup.config :as config]
    [utils.debounce :as debounce])
   (:require-macros [status-im.utils.views :as views]))
 
@@ -151,7 +152,9 @@
      home-item
      {:on-press      (fn []
                        (re-frame/dispatch [:dismiss-keyboard])
-                       (re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id])
+                       (if config/new-ui-enabled?
+                         (re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id])
+                         (re-frame/dispatch [:chat.ui/navigate-to-chat chat-id]))
                        (re-frame/dispatch [:search/home-filter-changed nil]))
       :on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet
                                           {:content (fn []
@@ -166,7 +169,9 @@
      home-item
      {:on-press      (fn []
                        (re-frame/dispatch [:dismiss-keyboard])
-                       (re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id])
+                       (if config/new-ui-enabled?
+                         (re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id])
+                         (re-frame/dispatch [:chat.ui/navigate-to-chat chat-id]))
                        (re-frame/dispatch [:search/home-filter-changed nil]))
       :on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet
                                           {:content (fn []

src/status_im/ui/screens/multiaccounts/sheets.cljs

@@ -1,19 +1,14 @@
 (ns status-im.ui.screens.multiaccounts.sheets
   (:require [quo.core :as quo]
             [re-frame.core :as re-frame]
-            [i18n.i18n :as i18n]
-            status-im2.common.bottom-sheet.view))
-
-(defn- hide-sheet-and-dispatch
-  [event]
-  (re-frame/dispatch [:dismiss-bottom-sheet])
-  (re-frame/dispatch event))
+            [i18n.i18n :as i18n]))
 
 (defn actions-sheet
   []
   [quo/list-item
    {:theme               :accent
-    :on-press            #(hide-sheet-and-dispatch [:generate-and-derive-addresses])
+    :on-press            #(do (re-frame/dispatch [:bottom-sheet/hide])
+                              (re-frame/dispatch [:generate-and-derive-addresses]))
     :icon                :main-icons/add
     :accessibility-label :generate-a-new-key
     :title               (i18n/label :t/generate-a-new-key)}])

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

@@ -10,6 +10,7 @@
             [status-im.ui.components.react :as react]
             [status-im.ui.components.toolbar :as toolbar]
             [status-im.ui.screens.chat.photos :as photos]
+            [status-im.ui.screens.multiaccounts.sheets :as sheets]
             [status-im.ui.screens.multiaccounts.styles :as styles]
             [utils.security.core :as security]))
 
@@ -40,7 +41,8 @@
 
 (defn topbar-button
   []
-  (re-frame/dispatch [:bottom-sheet/show-sheet :generate-a-new-key {}]))
+  (re-frame/dispatch [:bottom-sheet/show-sheet
+                      {:content sheets/actions-sheet}]))
 
 (defview multiaccounts
   []

src/status_im/ui2/screens/chat/components/new_chat/styles.cljs

@@ -1,5 +1,4 @@
 (ns status-im.ui2.screens.chat.components.new-chat.styles)
-
 (def contact-selection-heading
   {:style {:flex-direction     :row
            :justify-content    :space-between
@@ -14,9 +13,4 @@
    :margin-left     20
    :margin-bottom   36
    :justify-content :center
-   :align-items     :center})
-
-(defn chat-button
-  [{:keys [bottom]}]
-  {:position :absolute
-   :bottom   (- bottom 50)})
+   :align-items     :center})

src/status_im/ui2/screens/chat/components/new_chat/view.cljs

@@ -8,19 +8,12 @@
             [i18n.i18n :as i18n]
             [status-im.ui.components.react :as react]
             [utils.re-frame :as rf]
+            [status-im.ui.screens.chat.sheets :refer [hide-sheet-and-dispatch]]
             [status-im.ui.components.toolbar :as toolbar]
             [status-im.ui2.screens.common.contact-list.view :as contact-list]
             [quo2.components.markdown.text :as text]
             [status-im.ui.components.invite.events :as invite.events]
-            [status-im.ui2.screens.chat.components.new-chat.styles :as style]
-            status-im2.common.bottom-sheet.view
-            [quo.react :as quo.react]
-            [quo.components.safe-area :as safe-area]))
-
-(defn- hide-sheet-and-dispatch
-  [event]
-  (re-frame/dispatch-sync [:dismiss-bottom-sheet])
-  (rf/dispatch event))
+            [status-im.ui2.screens.chat.components.new-chat.styles :as style]))
 
 (defn- on-toggle
   [allow-new-users? checked? public-key]
@@ -46,87 +39,81 @@
      :size   :paragraph-1
      :style  {:margin-bottom 2
               :margin-top    20}}
-    (i18n/label :t/you-have-no-contacts)]
+    "You have no contacts"]
    [text/text
     {:weight :regular
      :size   :label
      :style  {:margin-bottom 20}}
-    (i18n/label :t/invite-friends-and-family)]
+    "Invite your friends and family to Status"]
    [quo2/button
     {:type     :primary
      :style    {:margin-bottom 12}
      :on-press #(rf/dispatch [::invite.events/share-link nil])}
-    (i18n/label :t/invite-friends)]
+    "Invite friends"]
    [quo2/button
     {:type     :grey
      :on-press #(hide-sheet-and-dispatch [:open-modal :new-contact])}
-    (i18n/label :t/add-a-contact)]])
+    "Add a contact"]])
 
 (defn contact-selection-list
   []
-  [:f>
-   (fn []
-     (quo.react/effect! #(rf/dispatch [:clear-contacts]) [])
-     (let [contacts                                     (rf/sub
-                                                         [:contacts/sorted-and-grouped-by-first-letter])
-           selected-contacts-count                      (rf/sub [:selected-contacts-count])
-           window-height                                (rf/sub [:dimensions/window-height])
-           one-contact-selected?                        (= selected-contacts-count 1)
-           contacts-selected?                           (pos? selected-contacts-count)
-           {:keys [names public-key]}                   (-> contacts first :data first)
-           added?                                       (reagent/atom '())
-           {:keys [nickname ens-name three-words-name]} names
-           first-username                               (or ens-name nickname three-words-name)
-           no-contacts?                                 (empty? contacts)
-           safe-area                                    (safe-area/use-safe-area)]
-       [react/view {:style {:height (* window-height 0.9)}}
-        [quo2/button
-         {:type                      :grey
-          :icon                      true
-          :on-press                  #(re-frame/dispatch-sync [:dismiss-bottom-sheet])
-          :style                     style/contact-selection-close
-          :override-background-color (quo2.colors/theme-colors quo2.colors/neutral-10
-                                                               quo2.colors/neutral-90)}
-         :i/close]
-        [react/view style/contact-selection-heading
-         [quo2/text
-          {:weight :semi-bold
-           :size   :heading-1
-           :style  {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}}
-          (i18n/label :t/new-chat)]
-         (when-not no-contacts?
-           [quo2/text
-            {:size   :paragraph-2
-             :weight :regular
-             :style  {:color (quo2.colors/theme-colors quo2.colors/neutral-40 quo2.colors/neutral-50)}}
-            (i18n/label :t/selected-count-from-max
-                        {:selected (inc selected-contacts-count)
-                         :max      constants/max-group-chat-participants})])]
-        [react/view
-         {:style {:height        430
-                  :margin-bottom -20}}
-         (if no-contacts?
-           [no-contacts-view]
-           [contact-list/contact-list
-            {:icon              :check
-             :group             nil
-             :added?            added?
-             :search?           false
-             :start-a-new-chat? true
-             :on-toggle         on-toggle}])]
-        (when contacts-selected?
-          [toolbar/toolbar
-           {:show-border? false
-            :center       [button/button
-                           {:type                :primary
-                            :accessibility-label :next-button
-                            :style               (style/chat-button safe-area)
-                            :on-press            #(do
-                                                    (if one-contact-selected?
-                                                      (hide-sheet-and-dispatch [:chat.ui/start-chat
-                                                                                public-key])
-                                                      (hide-sheet-and-dispatch [:navigate-to
-                                                                                :new-group])))}
-                           (if one-contact-selected?
-                             (i18n/label :t/chat-with {:selected-user first-username})
-                             (i18n/label :t/setup-group-chat))]}])]))])
+  (let [contacts                                     (rf/sub
+                                                      [:contacts/sorted-and-grouped-by-first-letter])
+        selected-contacts-count                      (rf/sub [:selected-contacts-count])
+        window-height                                (rf/sub [:dimensions/window-height])
+        one-contact-selected?                        (= selected-contacts-count 1)
+        contacts-selected?                           (pos? selected-contacts-count)
+        {:keys [names public-key]}                   (-> contacts first :data first)
+        added?                                       (reagent/atom '())
+        {:keys [nickname ens-name three-words-name]} names
+        first-username                               (or ens-name nickname three-words-name)
+        no-contacts?                                 (empty? contacts)]
+    [react/view {:style {:height (* window-height 0.95)}}
+     [quo2/button
+      {:type                      :grey
+       :icon                      true
+       :on-press                  #(rf/dispatch [:bottom-sheet/hide])
+       :style                     style/contact-selection-close
+       :override-background-color (quo2.colors/theme-colors quo2.colors/neutral-10
+                                                            quo2.colors/neutral-90)}
+      :i/close]
+     [react/view style/contact-selection-heading
+      [quo2/text
+       {:weight :semi-bold
+        :size   :heading-1
+        :style  {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}}
+       (i18n/label :t/new-chat)]
+      (when-not no-contacts?
+        [quo2/text
+         {:size   :paragraph-2
+          :weight :regular
+          :style  {:color (quo2.colors/theme-colors quo2.colors/neutral-40 quo2.colors/neutral-50)}}
+         (i18n/label :t/selected-count-from-max
+                     {:selected (inc selected-contacts-count)
+                      :max      constants/max-group-chat-participants})])]
+     [react/view
+      {:style {:height        430
+               :margin-bottom -20}}
+      (if no-contacts?
+        [no-contacts-view]
+        [contact-list/contact-list
+         {:icon              :check
+          :group             nil
+          :added?            added?
+          :search?           false
+          :start-a-new-chat? true
+          :on-toggle         on-toggle}])]
+     (when contacts-selected?
+       [toolbar/toolbar
+        {:show-border? false
+         :center       [button/button
+                        {:type                :primary
+                         :accessibility-label :next-button
+                         :on-press            #(do
+                                                 (if one-contact-selected?
+                                                   (hide-sheet-and-dispatch [:chat.ui/start-chat
+                                                                             public-key])
+                                                   (hide-sheet-and-dispatch [:navigate-to :new-group])))}
+                        (if one-contact-selected?
+                          (i18n/label :t/chat-with {:selected-user first-username})
+                          (i18n/label :t/setup-group-chat))]}])]))

src/status_im/ui2/screens/chat/composer/input.cljs

@@ -175,7 +175,6 @@
          :editable                 (not cooldown-enabled?)
          :blur-on-submit           false
          :auto-focus               false
-         :default-value            initial-value
          :on-focus                 #(set-active-panel nil)
          :max-length               chat.constants/max-text-size
          :placeholder-text-color   (:text-02 @quo.colors/theme)
@@ -195,15 +194,14 @@
          (partial on-change last-text-change timeout-id mentionable-users refs chat-id sending-image)
          :on-text-input            (partial on-text-input mentionable-users chat-id)}
         input-with-mentions (rf/sub [:chat/input-with-mentions])
-        children            (fn []
-                              (if mentions-enabled?
-                                (map-indexed
-                                 (fn [index [_ text]]
-                                   ^{:key (str index "_" type "_" text)}
-                                   [rn/text (when (= type :mention) {:style {:color colors/primary-50}})
-                                    text])
-                                 input-with-mentions)
-                                (get @input-texts chat-id)))]
+        children            (if mentions-enabled?
+                              (map-indexed
+                               (fn [index [type text]]
+                                 ^{:key (str index "_" type "_" text)}
+                                 [rn/text (when (= type :mention) {:style {:color colors/primary-50}})
+                                  text])
+                               input-with-mentions)
+                              (get @input-texts chat-id))]
     (reset! text-input-ref (:text-input-ref refs))
     ;when ios implementation for selectable-text-input is ready, we need remove this condition and use
     ;selectable-text-input directly.
@@ -224,8 +222,7 @@
 
 (defn update-input-text
   [{:keys [text-input chat-id]} text]
-  (on-text-change text chat-id)
-  (.setNativeProps ^js text-input (clj->js {:text text})))
+  (on-text-change text chat-id))
 
 (re-frame/reg-fx
  :set-text-input-value
@@ -338,7 +335,7 @@
                                   (oops/ocall manager :startActionMode text-input-handle))))
 
       :reagent-render
-      (fn [_]
+      (fn [chat-id {:keys [style ref on-selection-change] :as props} children]
         (let [ref                 #(do (reset! text-input-ref %)
                                        (when ref
                                          (quo.react/set-ref-val! ref %)))

src/status_im/ui2/screens/chat/messages/message.cljs

@@ -450,7 +450,7 @@
    [quo/text
     {:style  {:margin-top 6}
      :weight :bold
-     :size   :heading-2}
+     :size   :large}
     (i18n/label :t/contact-request)]
    [rn/view {:style {:padding-horizontal 16}}
     [quo/text

src/status_im/ui2/screens/chat/pin_limit_popover/style.cljs

@@ -3,8 +3,9 @@
 
 (defn pin-popover
   [width]
-  {:width            (- width 16)
-   :margin-left      8
+  {:position         :absolute
+   :width            (- width 16)
+   :left             8
    :background-color (colors/theme-colors colors/neutral-80-opa-90 colors/white-opa-90)
    :flex-direction   :row
    :border-radius    16

src/status_im/ui2/screens/chat/pin_limit_popover/view.cljs

@@ -24,41 +24,38 @@
                                         (reanimated/with-timing (if show-pin-limit-modal? 1 0)))
            (reanimated/set-shared-value z-index-animation
                                         (reanimated/with-timing (if show-pin-limit-modal? 10 -1)))))
-       (when show-pin-limit-modal?
-         [reanimated/view
-          {:style               (reanimated/apply-animations-to-style
-                                 {:opacity opacity-animation
-                                  :z-index z-index-animation}
-                                 (style/pin-popover width))
-           :accessibility-label :pin-limit-popover}
-          [rn/view {:style (style/pin-alert-container)}
-           [rn/view {:style style/pin-alert-circle}
-            [rn/text {:style {:color colors/danger-50}} "!"]]]
-          [rn/view {:style {:margin-left 8}}
-           [quo/text {:weight :semi-bold :color (colors/theme-colors colors/white colors/neutral-100)}
-            (i18n/label :t/cannot-pin-title)]
-           [quo/text {:size :paragraph-2 :color (colors/theme-colors colors/white colors/neutral-100)}
-            (i18n/label :t/cannot-pin-desc)]
-           [rn/touchable-opacity
-            {:accessibility-label :view-pinned-messages
-             :active-opacity      1
-             :on-press            (fn []
-                                    (rf/dispatch [:pin-message/hide-pin-limit-modal chat-id])
-                                    (rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list
-                                                  chat-id])
-                                    (rf/dispatch [:dismiss-keyboard]))
-             :style               style/view-pinned-messages}
-            [quo/text {:size :paragraph-2 :weight :medium :color colors/white}
-             (i18n/label :t/view-pinned-messages)]]]
-          [rn/touchable-opacity
-           {:accessibility-label :close-pin-limit-popover
-            :active-opacity      1
-            :on-press            #(rf/dispatch [:pin-message/hide-pin-limit-modal chat-id])
-            :style               {:position :absolute
-                                  :top      16
-                                  :right    16}}
-           [quo/icon :i/close
-            {:color (colors/theme-colors colors/white colors/neutral-100)
-             :size  12}]]])))])
+       [reanimated/view
+        {:style               (reanimated/apply-animations-to-style
+                               {:opacity opacity-animation
+                                :z-index z-index-animation}
+                               (style/pin-popover width))
+         :accessibility-label :pin-limit-popover}
+        [rn/view {:style (style/pin-alert-container)}
+         [rn/view {:style style/pin-alert-circle}
+          [rn/text {:style {:color colors/danger-50}} "!"]]]
+        [rn/view {:style {:margin-left 8}}
+         [quo/text {:weight :semi-bold :color (colors/theme-colors colors/white colors/neutral-100)}
+          (i18n/label :t/cannot-pin-title)]
+         [quo/text {:size :paragraph-2 :color (colors/theme-colors colors/white colors/neutral-100)}
+          (i18n/label :t/cannot-pin-desc)]
+         [rn/touchable-opacity
+          {:accessibility-label :view-pinned-messages
+           :active-opacity      1
+           :on-press            (fn []
+                                  (rf/dispatch [:pin-message/hide-pin-limit-modal chat-id])
+                                  (rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list chat-id]))
+           :style               style/view-pinned-messages}
+          [quo/text {:size :paragraph-2 :weight :medium :color colors/white}
+           (i18n/label :t/view-pinned-messages)]]]
+        [rn/touchable-opacity
+         {:accessibility-label :close-pin-limit-popover
+          :active-opacity      1
+          :on-press            #(rf/dispatch [:pin-message/hide-pin-limit-modal chat-id])
+          :style               {:position :absolute
+                                :top      16
+                                :right    16}}
+         [quo/icon :i/close
+          {:color (colors/theme-colors colors/white colors/neutral-100)
+           :size  12}]]]))])
 
 

src/status_im/ui2/screens/chat/pinned_banner/view.cljs

@@ -0,0 +1,36 @@
+(ns status-im.ui2.screens.chat.pinned-banner.view
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]))
+
+;; TODO (flexsurfer) this should be a banner component in quo2
+;; https://github.com/status-im/status-mobile/issues/14528
+(defn pinned-banner
+  [{:keys [latest-pin-text pins-count on-press]}]
+  [rn/touchable-opacity
+   {:accessibility-label :pinned-banner
+    :style               {:height             50
+                          :background-color   colors/primary-50-opa-20
+                          :flex-direction     :row
+                          :align-items        :center
+                          :padding-horizontal 20
+                          :padding-vertical   10}
+    :active-opacity      1
+    :on-press            on-press}
+   [quo/icon :i/pin {:size 20}]
+   [quo/text
+    {:number-of-lines 1
+     :size            :paragraph-2
+     :style           {:margin-left 10 :margin-right 50}}
+    latest-pin-text]
+   [rn/view
+    {:accessibility-label :pins-count
+     :style               {:position         :absolute
+                           :right            22
+                           :height           20
+                           :width            20
+                           :border-radius    8
+                           :justify-content  :center
+                           :align-items      :center
+                           :background-color colors/neutral-80-opa-5}}
+    [quo/text {:size :label :weight :medium} pins-count]]])

src/status_im/ui2/screens/common/contact_list/view.cljs

@@ -9,12 +9,10 @@
   [quo/divider-label {:label title}])
 
 (defn contact-list
-  [{:keys [start-a-new-chat?] :as data}]
-  (let [contacts (if start-a-new-chat?
-                   (rf/sub [:contacts/sorted-and-grouped-by-first-letter])
-                   (if (:group data)
-                     (rf/sub [:contacts/grouped-by-first-letter])
-                     (rf/sub [:contacts/filtered-active-sections])))]
+  [data]
+  (let [contacts (if (:group data)
+                   (rf/sub [:contacts/add-members-sections])
+                   (rf/sub [:contacts/filtered-active-sections]))]
     [rn/section-list
      {:key-fn                         :title
       :sticky-section-headers-enabled false

src/status_im/utils/universal_links/core.cljs

@@ -96,7 +96,7 @@
 (rf/defn handle-community-chat
   [cofx {:keys [chat-id]}]
   (log/info "universal-links: handling community chat" chat-id)
-  {:dispatch [:chat.ui/navigate-to-chat-nav2 chat-id]})
+  {:dispatch [:chat.ui/navigate-to-chat chat-id]})
 
 (rf/defn handle-public-chat
   [cofx {:keys [topic]}]

src/status_im2/common/bottom_sheet/styles.cljs

@@ -22,35 +22,14 @@
    :top              0
    :background-color colors/neutral-100})
 
-(def container
-  {:position :absolute
-   :left     0
-   :right    0
-   :top      0
-   :bottom   0
-   :overflow :hidden})
-
-(defn content-style
-  [insets]
-  {:position       :absolute
-   :left           0
-   :right          0
-   :top            0
-   :padding-top    border-radius
-   :padding-bottom (:bottom insets)})
-
-(defn selected-background
-  []
-  {:border-radius     12
-   :padding-left      12
-   :margin-horizontal 8
-   :margin-bottom     10
-   :height            48
-   :background-color  (colors/theme-colors colors/white colors/neutral-90)})
-
 (defn background
   []
-  {:background-color        (colors/theme-colors colors/white colors/neutral-95)
-   :flex                    1
+  {:position                :absolute
+   :left                    0
+   :right                   0
+   :top                     0
+   :bottom                  0
    :border-top-left-radius  border-radius
-   :border-top-right-radius border-radius})
+   :border-top-right-radius border-radius
+   :overflow                :hidden
+   :background-color        (colors/theme-colors colors/white colors/neutral-95)})

src/status_im2/common/bottom_sheet/view.cljs

@@ -10,11 +10,13 @@
             [react-native.platform :as platform]
             [react-native.reanimated :as reanimated]
             [react-native.safe-area :as safe-area]
-            [utils.re-frame :as rf]))
+            [reagent.core :as reagent]))
 
 (def bottom-sheet-js (js/require "../src/js/bottom_sheet.js"))
 
-(defn- with-animation
+(def animation-delay 450)
+
+(defn with-animation
   [value & [options callback]]
   (reanimated/with-spring
    value
@@ -24,6 +26,20 @@
             options)
    callback))
 
+(def content-height (reagent/atom nil))
+(def show-bottom-sheet? (reagent/atom nil))
+(def keyboard-was-shown? (reagent/atom false))
+(def expanded? (reagent/atom false))
+(def gesture-running? (reagent/atom false))
+
+(defn reset-atoms
+  []
+  (reset! show-bottom-sheet? nil)
+  (reset! content-height nil)
+  (reset! expanded? false)
+  (reset! keyboard-was-shown? false)
+  (reset! gesture-running? false))
+
 (defn get-bottom-sheet-gesture
   [pan-y translate-y bg-height bg-height-expanded
    window-height keyboard-shown disable-drag? expandable?
@@ -31,16 +47,16 @@
   (-> (gesture/gesture-pan)
       (gesture/on-start
        (fn [_]
-         (rf/dispatch [:bottom-sheet/gesture-running? true])
+         (reset! gesture-running? true)
          (when (and keyboard-shown (not disable-drag?) show-bottom-sheet?)
            (re-frame/dispatch [:dismiss-keyboard]))))
       (gesture/on-update
        (fn [evt]
          (when (and (not disable-drag?) show-bottom-sheet?)
-           (let [max-pan-up   (if (or expanded? (not expandable?))
+           (let [max-pan-up   (if (or @expanded? (not expandable?))
                                 0
                                 (- (- bg-height-expanded bg-height)))
-                 max-pan-down (if expanded?
+                 max-pan-down (if @expanded?
                                 bg-height-expanded
                                 bg-height)]
              (reanimated/set-shared-value pan-y
@@ -51,21 +67,21 @@
                                            max-pan-up))))))
       (gesture/on-end
        (fn [_]
-         (rf/dispatch [:bottom-sheet/gesture-running? false])
+         (reset! gesture-running? false)
          (when (and (not disable-drag?) show-bottom-sheet?)
            (let [end-pan-y                  (- window-height (.-value translate-y))
-                 expand-threshold           (min (* bg-height 1.1) (+ bg-height 50))
-                 collapse-threshold         (max (* bg-height-expanded 0.9) (- bg-height-expanded 50))
+                 expand-threshold           (min (* bg-height * 1.1) (+ bg-height 50))
+                 collapse-threshold         (max (* bg-height-expanded * 0.9) (- bg-height-expanded 50))
                  should-close-bottom-sheet? (< end-pan-y (max (* bg-height 0.7) 50))]
              (cond
                should-close-bottom-sheet?
                (close-bottom-sheet)
 
-               (and (not expanded?) (> end-pan-y expand-threshold))
-               (rf/dispatch [:bottom-sheet/did-expand true])
+               (and (not @expanded?) (> end-pan-y expand-threshold))
+               (reset! expanded? true)
 
-               (and expanded? (< end-pan-y collapse-threshold))
-               (rf/dispatch [:bottom-sheet/did-expand false]))))))))
+               (and @expanded? (< end-pan-y collapse-threshold))
+               (reset! expanded? false))))))))
 
 (defn bottom-sheet
   [props children]
@@ -75,26 +91,28 @@
          visible?          :visible?
          backdrop-dismiss? :backdrop-dismiss?
          expandable?       :expandable?
-         selected-item     :selected-item
          :or               {show-handle?      true
                             backdrop-dismiss? true
                             expandable?       false}}
         props
-        close-bottom-sheet #(re-frame/dispatch-sync [:dismiss-bottom-sheet on-cancel])]
+        close-bottom-sheet (fn []
+                             (reset! show-bottom-sheet? false)
+                             (when (fn? on-cancel) (on-cancel))
+                             (timer/set-timeout
+                              #(do
+                                 (re-frame/dispatch [:bottom-sheet/hide-navigation-overlay])
+                                 (reset-atoms))
+                              animation-delay))]
     [safe-area/consumer
      (fn [insets]
        [:f>
         (fn []
-          (let [{height       :height
-                 window-width :width}
+          (let [{window-height :height
+                 window-width  :width}
                 (rn/use-window-dimensions)
-                window-height (if selected-item (- height 72) height)
                 {:keys [keyboard-shown]} (hooks/use-keyboard)
                 bg-height-expanded (- window-height (:top insets))
-                {:keys [content-height show-bottom-sheet? keyboard-was-shown? expanded? gesture-running?
-                        animation-delay]}
-                (rf/sub [:bottom-sheet/config])
-                bg-height (max (min content-height bg-height-expanded) 150)
+                bg-height (max (min @content-height bg-height-expanded) 200)
                 bottom-sheet-dy (reanimated/use-shared-value 0)
                 pan-y (reanimated/use-shared-value 0)
                 translate-y (.useTranslateY ^js bottom-sheet-js window-height bottom-sheet-dy pan-y)
@@ -102,7 +120,7 @@
                 (.useBackgroundOpacity ^js bottom-sheet-js translate-y bg-height window-height)
                 on-content-layout (fn [evt]
                                     (let [height (oget evt "nativeEvent" "layout" "height")]
-                                      (rf/dispatch [:bottom-sheet/update-height height])))
+                                      (reset! content-height height)))
                 on-expanded (fn []
                               (reanimated/set-shared-value bottom-sheet-dy bg-height-expanded)
                               (reanimated/set-shared-value pan-y 0))
@@ -125,30 +143,30 @@
             (react/effect! #(do
                               (cond
                                 (and
-                                 (nil? show-bottom-sheet?)
+                                 (nil? @show-bottom-sheet?)
                                  visible?
-                                 (some? content-height)
-                                 (> content-height 0))
-                                (rf/dispatch [:bottom-sheet/show-quo2-bottom-sheet true])
+                                 (some? @content-height)
+                                 (> @content-height 0))
+                                (reset! show-bottom-sheet? true)
 
-                                (and show-bottom-sheet? (not visible?))
+                                (and @show-bottom-sheet? (not visible?))
                                 (close-bottom-sheet)))
-                           [show-bottom-sheet? content-height visible?])
+                           [@show-bottom-sheet? @content-height visible?])
             (react/effect! #(do
-                              (when show-bottom-sheet?
+                              (when @show-bottom-sheet?
                                 (cond
                                   keyboard-shown
                                   (do
-                                    (rf/dispatch [:bottom-sheet/show-quo2-bottom-sheet true])
-                                    (rf/dispatch [:bottom-sheet/did-expand true]))
-                                  (and keyboard-was-shown? (not keyboard-shown))
-                                  (rf/dispatch [:bottom-sheet/did-expand false]))))
-                           [show-bottom-sheet? keyboard-was-shown?])
+                                    (reset! keyboard-was-shown? true)
+                                    (reset! expanded? true))
+                                  (and @keyboard-was-shown? (not keyboard-shown))
+                                  (reset! expanded? false))))
+                           [@show-bottom-sheet? @keyboard-was-shown?])
             (react/effect! #(do
-                              (when-not gesture-running?
+                              (when-not @gesture-running?
                                 (cond
-                                  show-bottom-sheet?
-                                  (if expanded?
+                                  @show-bottom-sheet?
+                                  (if @expanded?
                                     (do
                                       (reanimated/set-shared-value
                                        bottom-sheet-dy
@@ -158,7 +176,7 @@
                                       ;; withTiming/withSpring callback not working
                                       ;; on-expanded should be called as a callback of
                                       ;; with-animation instead, once this issue has been resolved
-                                      (timer/set-timeout on-expanded (or animation-delay 450)))
+                                      (timer/set-timeout on-expanded animation-delay))
                                     (do
                                       (reanimated/set-shared-value
                                        bottom-sheet-dy
@@ -168,11 +186,11 @@
                                       ;; withTiming/withSpring callback not working
                                       ;; on-collapsed should be called as a callback of
                                       ;; with-animation instead, once this issue has been resolved
-                                      (timer/set-timeout on-collapsed (or animation-delay 450))))
+                                      (timer/set-timeout on-collapsed animation-delay)))
 
-                                  (= show-bottom-sheet? false)
+                                  (= @show-bottom-sheet? false)
                                   (reanimated/set-shared-value bottom-sheet-dy (with-animation 0)))))
-                           [show-bottom-sheet? expanded? gesture-running?])
+                           [@show-bottom-sheet? @expanded? @gesture-running?])
 
             [:<>
              [rn/touchable-without-feedback {:on-press (when backdrop-dismiss? close-bottom-sheet)}
@@ -187,21 +205,22 @@
                         {:transform [{:translateY translate-y}]}
                         {:width  window-width
                          :height window-height})}
-               [rn/view {:style styles/container}
-                (when selected-item
-                  [rn/view {:style (styles/selected-background)}
-                   [selected-item]])
-                [rn/view {:style (styles/background)}
-                 [rn/keyboard-avoiding-view
-                  {:behaviour (if platform/ios? :padding :height)
-                   :style     {:flex 1}}
-                  [rn/view
-                   {:style     (styles/content-style insets)
-                    :on-layout (when-not (and
-                                          (some? content-height)
-                                          (> content-height 0))
-                                 on-content-layout)}
-                   children]]
+               [rn/view {:style (styles/background)}
+                [rn/keyboard-avoiding-view
+                 {:behaviour (if platform/ios? :padding :height)
+                  :style     {:flex 1}}
+                 [rn/view
+                  {:style     {:position       :absolute
+                               :left           0
+                               :right          0
+                               :top            0
+                               :padding-top    styles/border-radius
+                               :padding-bottom (:bottom insets)}
+                   :on-layout (when-not (and
+                                         (some? @content-height)
+                                         (> @content-height 0))
+                                on-content-layout)}
+                  children]]
 
-                 (when show-handle?
-                   [rn/view {:style (styles/handle)}])]]]]]))])]))
+                (when show-handle?
+                  [rn/view {:style (styles/handle)}])]]]]))])]))

src/status_im2/common/confirmation_drawer/view.cljs

@@ -4,9 +4,7 @@
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.common.confirmation-drawer.style :as style]
-            [utils.re-frame :as rf]
-            [re-frame.core :as re-frame]
-            status-im2.common.bottom-sheet.view))
+            [utils.re-frame :as rf]))
 
 (defn avatar
   [group-chat color display-name photo-path]
@@ -58,7 +56,7 @@
           [quo/button
            {:type     :grey
             :style    {:flex 0.48} ;;WUT? 0.48 , whats that ?
-            :on-press #(re-frame/dispatch-sync [:dismiss-bottom-sheet])}
+            :on-press #(rf/dispatch [:bottom-sheet/hide])}
            (i18n/label :t/close)]
           [quo/button
            {:type     :danger

src/status_im2/common/contact_list_item/view.cljs

@@ -2,19 +2,21 @@
   (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
+            [react-native.platform :as platform]
             [status-im2.common.home.actions.view :as actions]
             [status-im2.contexts.chat.home.chat-list-item.style :as style]
             [utils.address :as utils.address]
             [utils.re-frame :as rf]
-            [reagent.core :as reagent]
-            [quo.react :as react]))
+            [reagent.core :as reagent]))
 
 (defn open-chat
   [chat-id]
   (let [view-id (rf/sub [:view-id])]
     (when (= view-id :shell-stack)
       (rf/dispatch [:dismiss-keyboard])
-      (rf/dispatch [:chat.ui/show-profile chat-id])
+      (if platform/android?
+        (rf/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id])
+        (rf/dispatch [:chat.ui/navigate-to-chat chat-id]))
       (rf/dispatch [:search/home-filter-changed nil]))))
 
 (defn action-icon
@@ -26,39 +28,31 @@
         admin?                    (get admins current-pk)
         checked?                  (reagent/atom (if start-a-new-chat?
                                                   user-selected?
-                                                  member?))
-        on-check                  (fn [selected]
-                                    (if start-a-new-chat?
-                                      (on-toggle true @checked? public-key)
-                                      (if-not member?
-                                        (if selected
-                                          (rf/dispatch [:select-participant public-key true])
-                                          (rf/dispatch [:deselect-participant public-key true]))
-                                        (if selected
-                                          (rf/dispatch [:undo-deselect-member public-key true])
-                                          (rf/dispatch [:deselect-member public-key true])))))]
-    [:f>
-     (fn []
-       [rn/touchable-opacity
-        {:on-press #(rf/dispatch [:bottom-sheet/show-sheet
-                                  {:content (fn [] [actions/actions item extra-data])}])
-         :style    {:position :absolute
-                    :right    20}}
-        (if (= icon :options)
-          [quo/icon :i/options
-           {:size  20
-            :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
-          (react/use-memo
-           (fn []
-             [quo/checkbox
-              {:default-checked?    @checked?
-               :accessibility-label :contact-toggle-check
-               :disabled?           (and member? (not admin?))
-               :on-change           on-check}])
-           [checked?]))])]))
+                                                  member?))]
+    [rn/touchable-opacity
+     {:on-press #(rf/dispatch [:bottom-sheet/show-sheet
+                               {:content (fn [] [actions/actions item extra-data])}])
+      :style    {:position :absolute
+                 :right    20}}
+     (if (= icon :options)
+       [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
+       [quo/checkbox
+        {:default-checked?    @checked?
+         :accessibility-label :contact-toggle-check
+         :disabled?           (and member? (not admin?))
+         :on-change           (fn [selected]
+                                (if start-a-new-chat?
+                                  (on-toggle true @checked? public-key)
+                                  (if-not member?
+                                    (if selected
+                                      (rf/dispatch [:select-participant public-key true])
+                                      (rf/dispatch [:deselect-participant public-key true]))
+                                    (if selected
+                                      (rf/dispatch [:undo-deselect-member public-key true])
+                                      (rf/dispatch [:deselect-member public-key true])))))}])]))
 
 (defn contact-list-item
-  [item _ _ {:keys [start-a-new-chat? on-toggle] :as extra-data}]
+  [item _ _ {:keys [group start-a-new-chat? on-toggle] :as extra-data}]
   (let [{:keys [public-key ens-verified added? images]} item
         display-name                                    (first (rf/sub
                                                                 [:contacts/contact-two-names-by-identity
@@ -77,8 +71,9 @@
        :on-press            #(if start-a-new-chat?
                                (on-toggle true user-selected? public-key)
                                (open-chat public-key))
-       :on-long-press       #(rf/dispatch [:bottom-sheet/show-sheet
-                                           {:content (fn [] [actions/actions item extra-data])}])})
+       :on-long-press       #(when (some? group)
+                               (rf/dispatch [:bottom-sheet/show-sheet
+                                             {:content (fn [] [actions/actions item extra-data])}]))})
      [quo/user-avatar
       {:full-name         display-name
        :profile-picture   photo-path

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

@@ -1,14 +1,11 @@
 (ns status-im2.common.home.actions.view
-  (:require ;;TODO move to
-   ;;status-im2
-   [i18n.i18n :as i18n]
-   [quo2.components.drawers.action-drawers :as drawer]
-   [status-im.chat.models :as chat.models]
-   [status-im2.common.confirmation-drawer.view :as confirmation-drawer] ;;TODO move to
-   [status-im2.common.constants :as constants]
-   [utils.re-frame :as rf]
-   [react-native.background-timer :as timer]
-   [re-frame.core :as re-frame]))
+  (:require [i18n.i18n :as i18n]
+            [quo2.components.drawers.action-drawers :as drawer]
+            [status-im.chat.models :as chat.models]
+            [status-im2.common.confirmation-drawer.view :as confirmation-drawer] ;;TODO move to
+                                                                                 ;;status-im2
+            [status-im2.common.constants :as constants]
+            [utils.re-frame :as rf]))
 
 (defn- entry
   [{:keys [icon label on-press danger? sub-label chevron? add-divider? accessibility-label]}]
@@ -28,11 +25,8 @@
 
 (defn hide-sheet-and-dispatch
   [event]
-  (let [{:keys [animation-delay]} (rf/sub [:bottom-sheet/config])]
-    (re-frame/dispatch-sync [:dismiss-bottom-sheet])
-    (timer/set-timeout (fn []
-                         (rf/dispatch event))
-                       (or animation-delay 450))))
+  (rf/dispatch [:bottom-sheet/hide])
+  (rf/dispatch event))
 
 (defn show-profile-action
   [chat-id]
@@ -49,11 +43,11 @@
 
 (defn mute-chat-action
   [chat-id]
-  (rf/dispatch [::chat.models/mute-chat-toggled chat-id true]))
+  (hide-sheet-and-dispatch [::chat.models/mute-chat-toggled chat-id true]))
 
 (defn unmute-chat-action
   [chat-id]
-  (rf/dispatch [::chat.models/mute-chat-toggled chat-id false]))
+  (hide-sheet-and-dispatch [::chat.models/mute-chat-toggled chat-id false]))
 
 (defn clear-history-action
   [{:keys [chat-id] :as item}]

src/status_im2/common/not_implemented.cljs

@@ -3,6 +3,5 @@
 
 (defn not-implemented
   [content]
-  (when content
-    [rn/view {:border-color :red :border-width 1}
-     content]))
+  [rn/view {:border-color :red :border-width 1}
+   content])

src/status_im2/common/toasts/events.cljs

@@ -3,25 +3,25 @@
 
 (rf/defn upsert
   {:events [:toasts/upsert]}
-  [{:keys [db]} opts]
+  [{:keys [db]} id opts]
   (let [{:keys [ordered toasts]} (:toasts db)
-        next-toast-number        (get-in db [:toasts :next-toast-number] 1)
-        id                       (or (:id opts)
-                                     (str "toast-" next-toast-number))
         update?                  (some #(= % id) ordered)
-        ordered                  (if (not update?)
-                                   (conj ordered id)
-                                   ordered)
-        toasts                   (assoc toasts id (dissoc opts :id))]
-    (cond-> {:db (-> db
-                     (update :toasts assoc :ordered ordered :toasts toasts)
-                     (update :toasts dissoc :hide-toasts-timer-set))}
+        ordered                  (if (not update?) (conj ordered id) ordered)
+        toasts                   (assoc toasts id opts)
+        db                       (-> db
+                                     (update :toasts assoc :ordered ordered :toasts toasts)
+                                     (update :toasts dissoc :hide-toasts-timer-set))]
+    (if (and (not update?) (= (count ordered) 1))
+      {:show-toasts []
+       :db          db}
+      {:db db})))
 
-      (and (not update?) (= (count ordered) 1))
-      (assoc :show-toasts [])
-
-      (not (:id opts))
-      (update-in [:db :toasts :next-toast-number] inc))))
+(rf/defn create
+  {:events [:toasts/create]}
+  [{:keys [db]} opts]
+  (let [next-toast-id (or (get-in [:toasts :next-toast-id] db) 1)]
+    {:db       (assoc-in db [:toasts :next-toast-id] (inc next-toast-id))
+     :dispatch [:toasts/upsert (str "toast-" next-toast-id) opts]}))
 
 (rf/defn hide-toasts-with-check
   {:events [:toasts/hide-with-check]}

src/status_im2/common/toasts/view.cljs

@@ -8,28 +8,23 @@
             [status-im2.common.toasts.style :as style]
             [utils.re-frame :as rf]))
 
-;; (def ^:private slide-out-up-animation
-;;   (-> ^js reanimated/slide-out-up-animation
-;;       .springify
-;;       (.damping 20)
-;;       (.stiffness 300)))
+(def ^:private slide-out-up-animation
+  (-> ^js reanimated/slide-out-up-animation
+      .springify
+      (.damping 20)
+      (.stiffness 300)))
 
-;; (def ^:private slide-in-up-animation
-;;   (-> ^js reanimated/slide-in-up-animation
-;;       .springify
-;;       (.damping 20)
-;;       (.stiffness 300)))
+(def ^:private slide-in-up-animation
+  (-> ^js reanimated/slide-in-up-animation
+      .springify
+      (.damping 20)
+      (.stiffness 300)))
 
-;; (def ^:private linear-transition
-;;   (-> ^js reanimated/linear-transition
-;;       .springify
-;;       (.damping 20)
-;;       (.stiffness 300)))
-
-(defn toast
-  [id]
-  (let [toast-opts (rf/sub [:toasts/toast id])]
-    [quo/toast toast-opts]))
+(def ^:private linear-transition
+  (-> ^js reanimated/linear-transition
+      .springify
+      (.damping 20)
+      (.stiffness 300)))
 
 (defn container
   [id]
@@ -40,11 +35,13 @@
     (fn []
       [:f>
        (fn []
-         (let [duration     (or (rf/sub [:toasts/toast-cursor id :duration]) 3000)
-               on-dismissed #((or (rf/sub [:toasts/toast-cursor id :on-dismissed]) identity) id)
-               create-timer (fn []
-                              (reset! timer (utils.utils/set-timeout close! duration)))
+         (let [toast-opts   (rf/sub [:toasts/toast id])
+               duration     (get toast-opts :duration 3000)
+               on-dismissed #((get toast-opts :on-dismissed identity) id)
                translate-y  (reanimated/use-shared-value 0)
+               create-timer (fn []
+                              (reset! timer (utils.utils/set-timeout #(do (close!) (on-dismissed))
+                                                                     duration)))
                pan
                (->
                  (gesture/gesture-pan)
@@ -81,16 +78,13 @@
            (rn/use-unmount on-dismissed)
            [gesture/gesture-detector {:gesture pan}
             [reanimated/view
-             {;; TODO: this will eanble layout animation at runtime and causing flicker on android
-              ;; we need to resolve this and re-enable layout animation
-              ;; issue at https://github.com/status-im/status-mobile/issues/14752
-              ;; :entering slide-in-up-animation
-              ;; :exiting  slide-out-up-animation
-              ;; :layout   reanimated/linear-transition
-              :style (reanimated/apply-animations-to-style
-                      {:transform [{:translateY translate-y}]}
-                      style/each-toast-container)}
-             [toast id]]]))])))
+             {:entering slide-in-up-animation
+              :exiting  slide-out-up-animation
+              :layout   reanimated/linear-transition
+              :style    (reanimated/apply-animations-to-style
+                         {:transform [{:translateY translate-y}]}
+                         style/each-toast-container)}
+             [quo/toast toast-opts]]]))])))
 
 (defn toasts
   []
@@ -98,4 +92,6 @@
     [into
      [rn/view
       {:style style/outmost-transparent-container}]
-     (map (fn [id] ^{:key id} [container id]) toasts-ordered)]))
+     (->> toasts-ordered
+          reverse
+          (map (fn [id] ^{:key id} [container id])))]))

src/status_im2/contexts/activity_center/notification/contact_verification/view.cljs

@@ -5,14 +5,12 @@
             [status-im.constants :as constants]
             [utils.datetime :as datetime]
             [status-im2.contexts.activity-center.notification.common.view :as common]
-            [utils.re-frame :as rf]
-            [re-frame.core :as re-frame]
-            status-im2.common.bottom-sheet.view))
+            [utils.re-frame :as rf]))
 
 (defn- hide-bottom-sheet-and-dispatch
   [event]
-  (rf/dispatch [:dismiss-bottom-sheet])
-  (re-frame/dispatch-sync [:dismiss-keyboard])
+  (rf/dispatch [:bottom-sheet/hide])
+  (rf/dispatch [:dismiss-keyboard])
   (rf/dispatch event))
 
 (defn- context-tags

src/status_im2/contexts/activity_center/notification/mentions/view.cljs

@@ -46,7 +46,7 @@
     [rn/touchable-opacity
      {:on-press (fn []
                   (rf/dispatch [:hide-popover])
-                  (rf/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id]))}
+                  (rf/dispatch [:chat.ui/navigate-to-chat chat-id]))}
      [quo/activity-log
       {:title     (i18n/label :t/mention)
        :icon      :i/mention

src/status_im2/contexts/activity_center/notification/reply/view.cljs

@@ -38,7 +38,7 @@
     [rn/touchable-opacity
      {:on-press (fn []
                   (rf/dispatch [:hide-popover])
-                  (rf/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id]))}
+                  (rf/dispatch [:chat.ui/navigate-to-chat chat-id]))}
      [quo/activity-log
       {:title     (i18n/label :t/message-reply)
        :icon      :i/reply

src/status_im2/contexts/activity_center/view.cljs

@@ -42,9 +42,8 @@
 (defn tabs
   []
   (let [filter-type (rf/sub [:activity-center/filter-type])]
-    [quo/tabs
+    [quo/scrollable-tabs
      {:size                32
-      :scrollable?         true
       :blur?               true
       :override-theme      :dark
       :style               style/tabs

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

@@ -9,9 +9,7 @@
             [status-im.ui2.screens.common.contact-list.view :as contact-list]
             [status-im2.common.contact-list-item.view :as contact-list-item]
             [status-im2.common.home.actions.view :as actions]
-            [utils.re-frame :as rf]
-            [re-frame.core :as re-frame]
-            status-im2.common.bottom-sheet.view))
+            [utils.re-frame :as rf]))
 
 (defn back-button
   []
@@ -78,7 +76,7 @@
            deselected-members      (rf/sub [:group-chat/deselected-members])]
        [rn/view {:style {:height (- window-height (:top safe-area))}}
         [rn/touchable-opacity
-         {:on-press            #(re-frame/dispatch-sync [:dismiss-bottom-sheet])
+         {:on-press            #(rf/dispatch [:bottom-sheet/hide])
           :accessibility-label :close-manage-members
           :style               (style/close-icon)}
          [quo2/icon :i/close {:color (colors/theme-colors colors/neutral-100 colors/white)}]]
@@ -99,7 +97,7 @@
                                   (rf/dispatch [:group-chats.ui/add-members-pressed])
                                   (js/setTimeout #(rf/dispatch [:group-chats.ui/remove-members-pressed])
                                                  500)
-                                  (re-frame/dispatch-sync [:dismiss-bottom-sheet]))
+                                  (rf/dispatch [:bottom-sheet/hide]))
            :disabled            (and (zero? (count selected-participants))
                                      (zero? (count deselected-members)))}
           (i18n/label :t/save)]]]))])
@@ -138,7 +136,6 @@
        {:style               (style/action-container color)
         :accessibility-label :pinned-messages
         :on-press            (fn []
-                               (rf/dispatch [:dismiss-keyboard])
                                (rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list chat-id]))}
        [rn/view
         {:style {:flex-direction  :row

src/status_im2/contexts/chat/messages/contact_requests/bottom_drawer.cljs

@@ -1,26 +0,0 @@
-(ns status-im2.contexts.chat.messages.contact-requests.bottom-drawer
-  (:require
-   [i18n.i18n :as i18n]
-   [utils.re-frame :as rf]
-   [quo2.core :as quo]
-   [quo2.components.drawers.permission-context.view :as permission-context]
-   [status-im2.common.constants :as constants]))
-
-(defn view
-  [contact-id contact-request-state]
-  (let [names (rf/sub [:contacts/contact-two-names-by-identity contact-id])]
-    [permission-context/view
-     [quo/button
-      {:type     :ghost
-       :on-press #(rf/dispatch [:chat.ui/show-profile contact-id])
-       :before   :i/communities}
-      (cond
-        (or (= contact-request-state
-               constants/contact-request-state-none)
-            (= contact-request-state
-               constants/contact-request-state-received))
-        (i18n/label :t/contact-request-chat-add {:name (first names)})
-        (= contact-request-state
-           constants/contact-request-state-sent)
-
-        (i18n/label :t/contact-request-chat-pending))]]))

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

@@ -1,6 +1,6 @@
 (ns status-im2.contexts.chat.messages.content.deleted.view
-  (:require [i18n.i18n :as i18n]
-            [quo2.core :as quo]))
+  (:require [quo2.core :as quo]
+            [i18n.i18n :as i18n]))
 
 (defn deleted-message
   [{:keys [deleted? deleted-undoable-till timestamp-str deleted-for-me-undoable-till]}]

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

@@ -28,9 +28,7 @@
   (let [response-to  (:response-to (:content message))
         default-size 36]
     [rn/touchable-opacity
-     {:on-press       (fn []
-                        (rf/dispatch [:dismiss-keyboard])
-                        (rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list chat-id]))
+     {:on-press       #(rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list chat-id])
       :active-opacity 1
       :style          (merge {:flex-direction :row :margin-vertical 8}
                              (old-style/message-wrapper message))}

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

@@ -2,7 +2,8 @@
   (:require [status-im2.common.constants :as constants]
             [quo2.core :as quo]
             [react-native.core :as rn]
-            [utils.re-frame :as rf]))
+            [utils.re-frame :as rf]
+            [status-im2.contexts.chat.messages.drawers.view :as drawers]))
 
 (defn message-reactions-row
   [chat-id message-id]
@@ -26,7 +27,5 @@
                                                    :emoji-id   emoji-id}]))
             :accessibility-label (str "emoji-reaction-" emoji-id)}]])
        [quo/add-reaction
-        {:on-press (fn []
-                     (rf/dispatch [:dismiss-keyboard])
-                     (rf/dispatch [:bottom-sheet/show-sheet :drawer/reactions
-                                   {:chat-id chat-id :message-id message-id}]))}]])))
+        {:on-press #(rf/dispatch [:bottom-sheet/show-sheet
+                                  {:content (fn [] [drawers/reactions chat-id message-id])}])}]])))

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

@@ -69,11 +69,8 @@
      {:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90)
       :style          {:border-radius 16}
       :on-press       #()
-      :on-long-press  (fn []
-                        (rf/dispatch [:dismiss-keyboard])
-                        (rf/dispatch [:bottom-sheet/show-sheet
-                                      {:content (drawers/reactions-and-actions message-data
-                                                                               context)}]))}
+      :on-long-press  #(rf/dispatch [:bottom-sheet/show-sheet
+                                     {:content (drawers/reactions-and-actions message-data context)}])}
      [rn/view {:padding-vertical 8}
       (when (and (seq response-to) quoted-message)
         [old-message/quoted-message {:message-id response-to :chat-id chat-id} quoted-message])

src/status_im2/contexts/chat/messages/delete_message/events.cljs

@@ -1,11 +1,8 @@
 (ns status-im2.contexts.chat.messages.delete-message.events
-  (:require
-   [i18n.i18n :as i18n]
-   [quo2.foundations.colors :as colors]
-   [status-im.chat.models.message-list :as message-list]
-   [taoensso.timbre :as log]
-   [utils.datetime :as datetime]
-   [utils.re-frame :as rf]))
+  (:require [status-im.chat.models.message-list :as message-list]
+            [utils.datetime :as datetime]
+            [taoensso.timbre :as log]
+            [utils.re-frame :as rf]))
 
 (defn- update-db-clear-undo-timer
   [db chat-id message-id]
@@ -23,7 +20,8 @@
                [:messages chat-id message-id]
                assoc
                :deleted?              true
-               :deleted-undoable-till (+ (datetime/timestamp) undo-time-limit-ms))))
+               :deleted-undoable-till (+ (datetime/timestamp)
+                                         undo-time-limit-ms))))
 
 (defn- update-db-undo-locally
   "Restore deleted message if called within timelimit"
@@ -50,44 +48,15 @@
   {:events [:chat.ui/delete-message]}
   [{:keys [db]} {:keys [chat-id message-id]} undo-time-limit-ms]
   (when (get-in db [:messages chat-id message-id])
-    ;; all delete message toast are the same toast with id :delete-message-for-everyone
-    ;; new delete operation will reset prev pending deletes' undo timelimit
-    ;; undo will undo all pending deletes
-    ;; all pending deletes are stored in toast
-    (let [existing-undo-toast (get-in db [:toasts :toasts :delete-message-for-everyone])
-          toast-count         (inc (get existing-undo-toast :message-deleted-for-everyone-count 0))
-          existing-undos      (-> existing-undo-toast
-                                  (get :message-deleted-for-everyone-undos [])
-                                  (conj {:message-id message-id :chat-id chat-id}))]
-      (assoc
-       (message-list/rebuild-message-list
-        {:db (reduce
-              ;; sync all pending deletes' undo timelimit, extend to the latest one
-              (fn [db-acc {:keys [chat-id message-id]}]
-                (update-db-delete-locally db-acc chat-id message-id undo-time-limit-ms))
-              db
-              existing-undos)}
-        chat-id)
-
-       :dispatch-n
-       [[:toasts/close :delete-message-for-everyone]
-        [:toasts/upsert
-         {:id                                 :delete-message-for-everyone
-          :icon                               :info
-          :icon-color                         colors/danger-50-opa-40
-          :message-deleted-for-everyone-count toast-count
-          :message-deleted-for-everyone-undos existing-undos
-          :text                               (i18n/label-pluralize
-                                               toast-count
-                                               :t/message-deleted-for-everyone-count)
-          :duration                           undo-time-limit-ms
-          :undo-duration                      (/ undo-time-limit-ms 1000)
-          :undo-on-press                      #(do (rf/dispatch [:chat.ui/undo-all-delete-message])
-                                                   (rf/dispatch [:toasts/close
-                                                                 :delete-message-for-everyone]))}]]
-       :utils/dispatch-later [{:dispatch [:chat.ui/delete-message-and-send
-                                          {:chat-id chat-id :message-id message-id}]
-                               :ms       undo-time-limit-ms}]))))
+    (assoc
+     (message-list/rebuild-message-list
+      {:db (update-db-delete-locally db chat-id message-id undo-time-limit-ms)}
+      chat-id)
+     :utils/dispatch-later
+     [{:dispatch [:chat.ui/delete-message-and-send
+                  {:chat-id    chat-id
+                   :message-id message-id}]
+       :ms       undo-time-limit-ms}])))
 
 (rf/defn undo
   {:events [:chat.ui/undo-delete-message]}
@@ -97,41 +66,22 @@
      {:db (update-db-undo-locally db chat-id message-id)}
      chat-id)))
 
-(rf/defn undo-all
-  {:events [:chat.ui/undo-all-delete-message]}
-  [{:keys [db]}]
-  (when-let [pending-undos (get-in db
-                                   [:toasts :toasts :delete-message-for-everyone
-                                    :message-deleted-for-everyone-undos])]
-    {:dispatch-n (mapv #(vector :chat.ui/undo-delete-message %) pending-undos)}))
-
-(defn- check-before-delete-and-send
-  "make sure message alredy deleted? locally and undo timelimit has passed"
-  [db chat-id message-id]
-  (let [message                                  (get-in db [:messages chat-id message-id])
-        {:keys [deleted? deleted-undoable-till]} message]
-    (and deleted?
-         deleted-undoable-till
-         (>= (datetime/timestamp) deleted-undoable-till))))
-
 (rf/defn delete-and-send
   {:events [:chat.ui/delete-message-and-send]}
-  [{:keys [db]} {:keys [message-id chat-id]} force?]
+  [{:keys [db]} {:keys [message-id chat-id]}]
   (when-let [message (get-in db [:messages chat-id message-id])]
-    (when (or force? (check-before-delete-and-send db chat-id message-id))
-      (cond-> {:db            (update-db-clear-undo-timer db chat-id message-id)
-               :json-rpc/call [{:method      "wakuext_deleteMessageAndSend"
-                                :params      [message-id]
-                                :js-response true
-                                :on-error    #(log/error "failed to delete message "
-                                                         {:message-id message-id :error %})
-                                :on-success  #(rf/dispatch
-                                               [:sanitize-messages-and-process-response
-                                                %])}]}
-        (get-in db [:pin-messages chat-id message-id])
-        (assoc :dispatch
-               [:pin-message/send-pin-message
-                {:chat-id chat-id :message-id message-id :pinned false}])))))
+    (cond-> {:db            (update-db-clear-undo-timer db chat-id message-id)
+             :json-rpc/call [{:method      "wakuext_deleteMessageAndSend"
+                              :params      [message-id]
+                              :js-response true
+                              :on-error    #(log/error "failed to delete message "
+                                                       {:message-id message-id :error %})
+                              :on-success  #(rf/dispatch [:sanitize-messages-and-process-response
+                                                          %])}]}
+      (get-in db [:pin-messages chat-id message-id])
+      (assoc :dispatch
+             [:pin-message/send-pin-message
+              {:chat-id chat-id :message-id message-id :pinned false}]))))
 
 (defn- filter-pending-send-messages
   "traverse all messages find not yet synced deleted? messages"
@@ -146,7 +96,7 @@
   {:events [:chat.ui/send-all-deleted-messages]}
   [{:keys [db] :as cofx}]
   (let [pending-send-messages (reduce-kv filter-pending-send-messages [] (:messages db))]
-    (apply rf/merge cofx (map #(delete-and-send % true) pending-send-messages))))
+    (apply rf/merge cofx (map delete-and-send pending-send-messages))))
 
 (rf/defn delete-messages-localy
   "Mark messages :deleted? localy in client"

src/status_im2/contexts/chat/messages/delete_message/events_test.cljs

@@ -15,46 +15,11 @@
           (let [result-message (get-in (delete-message/delete {:db db} message 1000)
                                        [:db :messages cid mid])]
             (is (= (:id result-message) mid))
-            (is (true? (:deleted? result-message)) "mark message :deleted?")
-            (is (= (:deleted-undoable-till result-message) 1001) "set message undo timelimit")))
-        (testing "delete with pending deletes"
-          (let [db      (-> db
-                            (update-in [:messages cid "pending-delete-message"]
-                                       assoc
-                                       :deleted?              true
-                                       :deleted-undoable-till 0
-                                       :whisper-timestamp     0)
-                            (update-in [:toasts :toasts :delete-message-for-everyone]
-                                       assoc
-                                       :message-deleted-for-everyone-count 1
-                                       :message-deleted-for-everyone-undos [{:message-id
-                                                                             "pending-delete-message"
-                                                                             :chat-id    cid}]))
-                effects (delete-message/delete {:db db} message 1000)]
-            (is (= (get-in effects [:db :messages cid mid :deleted-undoable-till])
-                   (get-in effects [:db :messages cid "pending-delete-message" :deleted-undoable-till])
-                   1001)
-                "sync all pending delete undo timelimit")
-            (let [upsert-toast (-> effects :dispatch-n second)]
-              (is (= (-> upsert-toast last :message-deleted-for-everyone-count) 2)
-                  "+1 pending deletes")
-              (is
-               (and
-                (-> upsert-toast
-                    last
-                    :message-deleted-for-everyone-undos
-                    first
-                    :message-id
-                    (= "pending-delete-message"))
-                (-> upsert-toast
-                    last
-                    :message-deleted-for-everyone-undos
-                    second
-                    :message-id
-                    (= mid)))
-               "pending deletes are in order"))))
+            (is (true? (:deleted? result-message)))
+            (is (= (:deleted-undoable-till result-message) 1001))))
         (testing "return nil if message not in db"
-          (is (= (delete-message/delete {:db {:messages []}} message 1000) nil)))))))
+          (is (= (delete-message/delete {:db {:messages []}} message 1000)
+                 nil)))))))
 
 (deftest undo-delete
   (let [db      {:messages {cid {mid {:id mid :whisper-timestamp 1}}}}
@@ -65,11 +30,14 @@
                                         [:messages cid mid]
                                         assoc
                                         :deleted?              true
-                                        :deleted-undoable-till (+ (datetime/timestamp) 1000))
-              result-message (get-in (delete-message/undo {:db db} message) [:db :messages cid mid])]
+                                        :deleted-undoable-till
+                                        (+ (datetime/timestamp) 1000))
+              result-message (get-in (delete-message/undo {:db db} message)
+                                     [:db :messages cid mid])]
           (is (= (:id result-message) mid))
           (is (nil? (:deleted? result-message)))
           (is (nil? (:deleted-undoable-till result-message)))))
+
       (testing "remain deleted when undo after timelimit"
         (let [db             (update-in db
                                         [:messages cid mid]
@@ -80,46 +48,47 @@
           (is (= (:id result-message) mid))
           (is (nil? (:deleted-undoable-till result-message)))
           (is (true? (:deleted? result-message)))))
+
       (testing "return nil if message not in db"
-        (is (= (delete-message/undo {:db {:messages []}} message) nil))))))
+        (is (= (delete-message/undo {:db {:messages []}} message)
+               nil))))))
 
 (deftest delete-and-send
-  (let [db      {:messages {cid {mid {:id mid :deleted? true :deleted-undoable-till 0}}}}
+  (let [db      {:messages {cid {mid {:id mid}}}}
         message {:message-id mid :chat-id cid}]
     (testing "delete and send"
       (testing "dispatch right rpc call fx"
-        (let [expected-db {:messages {cid {mid {:id mid :deleted? true}}}}
-              effects     (delete-message/delete-and-send {:db db} message false)
+        (let [expected-db {:messages {cid {mid {:id mid}}}}
+              effects     (delete-message/delete-and-send {:db db} message)
               result-db   (:db effects)
               rpc-calls   (:json-rpc/call effects)]
           (is (= result-db expected-db))
           (is (= (count rpc-calls) 1))
-          (is (= (-> rpc-calls first :method) "wakuext_deleteMessageAndSend"))
-          (is (= (-> rpc-calls first :params count) 1))
-          (is (= (-> rpc-calls first :params first) mid))))
+          (is (= (-> rpc-calls
+                     first
+                     :method)
+                 "wakuext_deleteMessageAndSend"))
+          (is (= (-> rpc-calls
+                     first
+                     :params
+                     count)
+                 1))
+          (is (= (-> rpc-calls
+                     first
+                     :params
+                     first)
+                 mid))))
       (testing "clean undo timer"
-        (let [expected-db {:messages {cid {mid {:id mid :deleted? true}}}}
+        (let [expected-db {:messages {cid {mid {:id mid}}}}
               effects     (delete-message/delete-and-send
                            {:db (update-in db
-                                           [:messages cid mid :deleted-undoable-till]
+                                           [:messages cid mid
+                                            :deleted-undoable-till]
                                            (constantly (datetime/timestamp)))}
-                           message
-                           false)
+                           message)
               result-db   (:db effects)]
           (is (= result-db expected-db))))
-      (testing "before deleted locally"
-        (let [effects (delete-message/delete-and-send
-                       {:db (update-in db [:messages cid mid] dissoc :deleted?)}
-                       message
-                       false)]
-          (is (-> effects :db nil?) "not delete and send")))
-      (testing "before undo timelimit"
-        (with-redefs [datetime/timestamp (constantly 1)]
-          (let [effects (delete-message/delete-and-send
-                         {:db (update-in db [:messages cid mid] assoc :deleted-undoable-till 2)}
-                         message
-                         false)]
-            (is (-> effects :db nil?)))))
       (testing "return nil if message not in db"
-        (is (= (delete-message/delete-and-send {:db {:messages []}} message false)
+        (is (= (delete-message/delete-and-send {:db {:messages []}}
+                                               message)
                nil))))))

src/status_im2/contexts/chat/messages/delete_message_for_me/events.cljs

@@ -1,11 +1,8 @@
 (ns status-im2.contexts.chat.messages.delete-message-for-me.events
-  (:require
-   [i18n.i18n :as i18n]
-   [quo2.foundations.colors :as colors]
-   [status-im.chat.models.message-list :as message-list]
-   [taoensso.timbre :as log]
-   [utils.datetime :as datetime]
-   [utils.re-frame :as rf]))
+  (:require [status-im.chat.models.message-list :as message-list]
+            [utils.datetime :as datetime]
+            [taoensso.timbre :as log]
+            [utils.re-frame :as rf]))
 
 (defn- update-db-clear-undo-timer
   [db chat-id message-id]
@@ -45,38 +42,15 @@
   {:events [:chat.ui/delete-message-for-me]}
   [{:keys [db]} {:keys [chat-id message-id]} undo-time-limit-ms]
   (when (get-in db [:messages chat-id message-id])
-    (let [existing-undo-toast (get-in db [:toasts :toasts :delete-message-for-me])
-          toast-count         (inc (get existing-undo-toast :message-deleted-for-me-count 0))
-          existing-undos      (-> existing-undo-toast
-                                  (get :message-deleted-for-me-undos [])
-                                  (conj {:message-id message-id :chat-id chat-id}))]
-      (assoc
-       (message-list/rebuild-message-list
-        {:db (reduce
-              ;; sync all pending deletes' undo timelimit, extend to the latest one
-              (fn [db-acc {:keys [message-id chat-id]}]
-                (update-db-delete-locally db-acc chat-id message-id undo-time-limit-ms))
-              db
-              existing-undos)}
-        chat-id)
-       :dispatch-n           [[:toasts/close :delete-message-for-me]
-                              [:toasts/upsert
-                               {:id :delete-message-for-me
-                                :icon :info
-                                :icon-color colors/danger-50-opa-40
-                                :message-deleted-for-me-count toast-count
-                                :message-deleted-for-me-undos existing-undos
-                                :text (i18n/label-pluralize toast-count
-                                                            :t/message-deleted-for-you-count)
-                                :duration undo-time-limit-ms
-                                :undo-duration (/ undo-time-limit-ms 1000)
-                                :undo-on-press #(do (rf/dispatch
-                                                     [:chat.ui/undo-all-delete-message-for-me])
-                                                    (rf/dispatch [:toasts/close
-                                                                  :delete-message-for-me]))}]]
-       :utils/dispatch-later [{:dispatch [:chat.ui/delete-message-for-me-and-sync
-                                          {:chat-id chat-id :message-id message-id}]
-                               :ms       undo-time-limit-ms}]))))
+    (assoc
+     (message-list/rebuild-message-list
+      {:db (update-db-delete-locally db chat-id message-id undo-time-limit-ms)}
+      chat-id)
+     :utils/dispatch-later
+     [{:dispatch [:chat.ui/delete-message-for-me-and-sync
+                  {:chat-id    chat-id
+                   :message-id message-id}]
+       :ms       undo-time-limit-ms}])))
 
 (rf/defn undo
   {:events [:chat.ui/undo-delete-message-for-me]}
@@ -86,37 +60,17 @@
      {:db (update-db-undo-locally db chat-id message-id)}
      chat-id)))
 
-(rf/defn undo-all
-  {:events [:chat.ui/undo-all-delete-message-for-me]}
-  [{:keys [db]}]
-  (when-let [pending-undos (get-in db
-                                   [:toasts :toasts :delete-message-for-me
-                                    :message-deleted-for-me-undos])]
-    {:dispatch-n (mapv #(vector :chat.ui/undo-delete-message-for-me %) pending-undos)}))
-
-(defn- check-before-delete-and-sync
-  "Make sure message alredy deleted-for-me? locally and undo timelimit has passed"
-  [db chat-id message-id]
-  (let [message                                                (get-in db [:messages chat-id message-id])
-        {:keys [deleted-for-me? deleted-for-me-undoable-till]} message]
-    (and deleted-for-me?
-         deleted-for-me-undoable-till
-         (>= (datetime/timestamp) deleted-for-me-undoable-till))))
-
 (rf/defn delete-and-sync
   {:events [:chat.ui/delete-message-for-me-and-sync]}
-  [{:keys [db]} {:keys [message-id chat-id]} force?]
-  (when-let [message (get-in db [:messages chat-id message-id])]
-    (when (or force? (check-before-delete-and-sync db chat-id message-id))
-      {:db            (update-db-clear-undo-timer db chat-id message-id)
-       :json-rpc/call [{:method      "wakuext_deleteMessageForMeAndSync"
-                        :params      [chat-id message-id]
-                        :js-response true
-                        :on-error    #(log/error
-                                       "failed to delete message for me, message id: "
-                                       {:message-id message-id :error %})
-                        :on-success  #(rf/dispatch [:sanitize-messages-and-process-response
-                                                    %])}]})))
+  [{:keys [db]} {:keys [message-id chat-id]}]
+  (when (get-in db [:messages chat-id message-id])
+    {:db            (update-db-clear-undo-timer db chat-id message-id)
+     :json-rpc/call [{:method      "wakuext_deleteMessageForMeAndSync"
+                      :params      [chat-id message-id]
+                      :js-response true
+                      :on-error    #(log/error "failed to delete message for me, message id: "
+                                               {:message-id message-id :error %})
+                      :on-success  #(rf/dispatch [:sanitize-messages-and-process-response %])}]}))
 
 (defn- filter-pending-sync-messages
   "traverse all messages find not yet synced deleted-for-me? messages"
@@ -132,4 +86,4 @@
   {:events [:chat.ui/sync-all-deleted-for-me-messages]}
   [{:keys [db] :as cofx}]
   (let [pending-sync-messages (reduce-kv filter-pending-sync-messages [] (:messages db))]
-    (apply rf/merge cofx (map #(delete-and-sync % true) pending-sync-messages))))
+    (apply rf/merge cofx (map delete-and-sync pending-sync-messages))))

src/status_im2/contexts/chat/messages/delete_message_for_me/events_test.cljs

@@ -18,43 +18,6 @@
             (is (= (:id result-message) mid))
             (is (true? (:deleted-for-me? result-message)))
             (is (= (:deleted-for-me-undoable-till result-message) 1001))))
-        (testing "delete with pending deletes"
-          (let [db      (-> db
-                            (update-in [:messages cid "pending-delete-message"]
-                                       assoc
-                                       :deleted-for-me?              true
-                                       :deleted-for-me-undoable-till 0
-                                       :whisper-timestamp            0)
-                            (update-in [:toasts :toasts :delete-message-for-me]
-                                       assoc
-                                       :message-deleted-for-me-count 1
-                                       :message-deleted-for-me-undos [{:message-id
-                                                                       "pending-delete-message"
-                                                                       :chat-id    cid}]))
-                effects (delete-message-for-me/delete {:db db} message 1000)]
-            (is (= (get-in effects [:db :messages cid mid :deleted-for-me-undoable-till])
-                   (get-in effects
-                           [:db :messages cid "pending-delete-message" :deleted-for-me-undoable-till])
-                   1001)
-                "sync all pending delete undo timelimit")
-            (let [upsert-toast (-> effects :dispatch-n second)]
-              (is (= (-> upsert-toast last :message-deleted-for-me-count) 2)
-                  "+1 pending deletes")
-              (is
-               (and
-                (-> upsert-toast
-                    last
-                    :message-deleted-for-me-undos
-                    first
-                    :message-id
-                    (= "pending-delete-message"))
-                (-> upsert-toast
-                    last
-                    :message-deleted-for-me-undos
-                    second
-                    :message-id
-                    (= mid)))
-               "pending deletes are in order"))))
         (testing "return nil if message not in db"
           (is (= (delete-message-for-me/delete {:db {:messages []}} message 1000)
                  nil)))))))
@@ -93,42 +56,46 @@
                nil))))))
 
 (deftest delete-for-me-and-sync
-  (let [db      {:messages {cid {mid {:id mid :deleted-for-me? true :deleted-for-me-undoable-till 0}}}}
+  (let [db      {:messages {cid {mid {:id mid}}}}
         message {:message-id mid :chat-id cid}]
     (testing "delete for me and sync"
       (testing "dispatch right rpc call"
-        (let [expected-db {:messages {cid {mid {:id mid :deleted-for-me? true}}}}
-              effects     (delete-message-for-me/delete-and-sync {:db db} message false)
+        (let [expected-db {:messages {cid {mid {:id mid}}}}
+              effects     (delete-message-for-me/delete-and-sync {:db db} message)
               result-db   (:db effects)
               rpc-calls   (:json-rpc/call effects)]
           (is (= result-db expected-db))
           (is (= (count rpc-calls) 1))
-          (is (= (-> rpc-calls first :method) "wakuext_deleteMessageForMeAndSync"))
-          (is (= (-> rpc-calls first :params count) 2))
-          (is (= (-> rpc-calls first :params first) cid))
-          (is (= (-> rpc-calls first :params second) mid))))
+          (is (= (-> rpc-calls
+                     first
+                     :method)
+                 "wakuext_deleteMessageForMeAndSync"))
+          (is (= (-> rpc-calls
+                     first
+                     :params
+                     count)
+                 2))
+          (is (= (-> rpc-calls
+                     first
+                     :params
+                     first)
+                 cid))
+          (is (= (-> rpc-calls
+                     first
+                     :params
+                     second)
+                 mid))))
       (testing "clean undo timer"
-        (let [expected-db {:messages {cid {mid {:id mid :deleted-for-me? true}}}}
+        (let [expected-db {:messages {cid {mid {:id mid}}}}
               effects     (delete-message-for-me/delete-and-sync
                            {:db (update-in db
-                                           [:messages cid mid :deleted-for-me-undoable-till]
+                                           [:messages cid mid
+                                            :deleted-for-me-undoable-till]
                                            (constantly (datetime/timestamp)))}
-                           message
-                           false)
+                           message)
               result-db   (:db effects)]
           (is (= result-db expected-db))))
-      (testing "before deleted locally"
-        (let [effects (delete-message-for-me/delete-and-sync
-                       {:db (update-in db [:messages cid mid] dissoc :deleted-for-me?)}
-                       message
-                       false)]
-          (is (-> effects :db nil?) "not delete and send")))
-      (testing "before undo timelimit"
-        (with-redefs [datetime/timestamp (constantly 1)]
-          (let [effects (delete-message-for-me/delete-and-sync
-                         {:db (update-in db [:messages cid mid] assoc :deleted-for-me-undoable-till 2)}
-                         message
-                         false)]
-            (is (-> effects :db nil?)))))
       (testing "return nil if message not in db"
-        (is (= (delete-message-for-me/delete-and-sync {:db {:messages []}} message false) nil))))))
+        (is (= (delete-message-for-me/delete-and-sync {:db {:messages []}}
+                                                      message)
+               nil))))))

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

@@ -7,9 +7,7 @@
             [status-im2.setup.config :as config]
             [status-im.ui.components.react :as react]
             [status-im.ui2.screens.chat.components.reply :as components.reply]
-            [status-im2.common.not-implemented :as not-implemented]
-            [re-frame.core :as re-frame]
-            status-im2.common.bottom-sheet.view))
+            [status-im2.common.not-implemented :as not-implemented]))
 
 (defn pin-message
   [{:keys [chat-id pinned] :as message-data}]
@@ -53,19 +51,15 @@
        :id       (if pinned :unpin :pin)}])
    (when-not pinned
      [{:type     :danger
-       :on-press #(do
-                    (re-frame/dispatch-sync [:dismiss-bottom-sheet])
-                    (rf/dispatch [:chat.ui/delete-message-for-me message-data
-                                  constants/delete-message-for-me-undo-time-limit-ms]))
+       :on-press #(rf/dispatch [:chat.ui/delete-message-for-me message-data
+                                constants/delete-message-for-me-undo-time-limit-ms])
        :label    (i18n/label :t/delete-for-me)
        :icon     :i/delete
        :id       :delete-for-me}])
    (when (and (or outgoing can-delete-message-for-everyone?) config/delete-message-enabled?)
      [{:type     :danger
-       :on-press #(do
-                    (re-frame/dispatch-sync [:dismiss-bottom-sheet])
-                    (rf/dispatch [:chat.ui/delete-message message-data
-                                  constants/delete-message-undo-time-limit-ms]))
+       :on-press #(rf/dispatch [:chat.ui/delete-message message-data
+                                constants/delete-message-undo-time-limit-ms])
        :label    (i18n/label :t/delete-for-everyone)
        :icon     :i/delete
        :id       :delete-for-all}])))
@@ -78,7 +72,7 @@
        :emoji-reaction-id))
 
 (defn reactions
-  [{:keys [chat-id message-id]}]
+  [chat-id message-id]
   (let [reactions     (rf/sub [:chats/message-reactions message-id chat-id])
         own-reactions (reduce (fn [acc {:keys [emoji-id own emoji-reaction-id]}]
                                 (if own
@@ -113,7 +107,7 @@
                                        (rf/dispatch [:models.reactions/send-emoji-reaction
                                                      {:message-id message-id
                                                       :emoji-id   id}]))
-                                     (re-frame/dispatch-sync [:dismiss-bottom-sheet]))})
+                                     (rf/dispatch [:bottom-sheet/hide]))})
             icon]])))]))
 
 (defn reactions-and-actions
@@ -125,7 +119,7 @@
           admin-actions  (filter #(= (:type %) :admin) actions)]
       [:<>
        ;; REACTIONS
-       [reactions {:chat-id chat-id :message-id message-id}]
+       [reactions chat-id message-id]
 
        ;; MAIN ACTIONS
        [rn/view {:style {:padding-horizontal 8}}
@@ -139,7 +133,7 @@
               :icon                (:icon action)
               :on-press            #(do
                                       (when on-press (on-press))
-                                      (re-frame/dispatch-sync [:dismiss-bottom-sheet]))}]))
+                                      (rf/dispatch [:bottom-sheet/hide]))}]))
         (when-not (empty? danger-actions)
           [quo/separator])
 
@@ -154,7 +148,7 @@
               :icon                (:icon action)
               :on-press            #(do
                                       (when on-press (on-press))
-                                      (re-frame/dispatch-sync [:dismiss-bottom-sheet]))}]))
+                                      (rf/dispatch [:bottom-sheet/hide]))}]))
         (when-not (empty? admin-actions)
           [quo/separator])
 
@@ -169,4 +163,4 @@
               :icon                (:icon action)
               :on-press            #(do
                                       (when on-press (on-press))
-                                      (re-frame/dispatch-sync [:dismiss-bottom-sheet]))}]))]])))
+                                      (rf/dispatch [:bottom-sheet/hide]))}]))]])))

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

@@ -131,12 +131,18 @@
   [{:keys [chat
            pan-responder
            show-input?]}]
-  (let [{:keys [group-chat chat-id public? community-id admins]} chat
-        messages                                                 (rf/sub [:chats/raw-chat-messages-stream
-                                                                          chat-id])
-        bottom-space                                             15]
-    [rn/view
-     {:style {:flex 1}}
+  (let [{:keys [group-chat chat-type chat-id public? community-id admins]} chat
+        mutual-contact-requests-enabled? (rf/sub [:mutual-contact-requests/enabled?])
+        messages (rf/sub [:chats/raw-chat-messages-stream chat-id])
+        one-to-one? (= chat-type constants/one-to-one-chat-type)
+        contact-added? (when one-to-one? (rf/sub [:contacts/contact-added? chat-id]))
+        should-send-contact-request?
+        (and
+         mutual-contact-requests-enabled?
+         one-to-one?
+         (not contact-added?))
+        bottom-space 15]
+    [:<>
      ;;DO NOT use anonymous functions for handlers
      [rn/flat-list
       (merge
@@ -145,7 +151,7 @@
         :ref                          list-ref
         :header                       [list-header chat]
         :footer                       [list-footer chat]
-        :data                         messages
+        :data                         (when-not should-send-contact-request? messages)
         :render-data                  (get-render-data {:group-chat      group-chat
                                                         :chat-id         chat-id
                                                         :public?         public?
@@ -158,7 +164,7 @@
         :on-viewable-items-changed    on-viewable-items-changed
         :on-end-reached               list-on-end-reached
         :on-scroll-to-index-failed    identity            ;;don't remove this
-        :content-container-style      {:padding-top    (+ bottom-space 32)
+        :content-container-style      {:padding-top    (+ bottom-space 16)
                                        :padding-bottom 16}
         :scroll-indicator-insets      {:top bottom-space} ;;ios only
         :keyboard-dismiss-mode        :interactive
@@ -174,10 +180,10 @@
      [quo/floating-shell-button
       (merge {:jump-to
               {:on-press #(do
-                            (rf/dispatch [:close-chat true])
+                            (rf/dispatch [:close-chat])
                             (rf/dispatch [:shell/navigate-to-jump-to]))
                :label    (i18n/label :t/jump-to)}}
              (when @show-floating-scroll-down-button
                {:scroll-to-bottom {:on-press scroll-to-bottom}}))
       {:position :absolute
-       :bottom   6}]]))
+       :bottom   12}]]))

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

@@ -1,5 +1,5 @@
 (ns status-im2.contexts.chat.messages.pin.banner.view
-  (:require [quo2.core :as quo]
+  (:require [status-im.ui2.screens.chat.pinned-banner.view :as pinned-banner]
             [utils.re-frame :as rf]))
 
 (defn banner
@@ -7,16 +7,14 @@
   (let [pinned-messages (rf/sub [:chats/pinned chat-id])
         latest-pin-id   (-> pinned-messages
                             vals
-                            first
+                            last
                             (get :message-id))
         latest-pin-text (get-in (rf/sub [:chats/chat-messages chat-id])
                                 [latest-pin-id :content :text])
         pins-count      (count (seq pinned-messages))]
-    [quo/banner
-     {:latest-pin-text latest-pin-text
-      :pins-count      pins-count
-      :on-press        (fn []
-                         (rf/dispatch [:dismiss-keyboard])
-                         (rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list chat-id]))}]))
-
-
+    (when (> pins-count 0)
+      ;; TODO (flexsurfer) this should be banner component in quo2
+      [pinned-banner/pinned-banner
+       {:latest-pin-text latest-pin-text
+        :pins-count      pins-count
+        :on-press        #(rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list chat-id])}])))

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

@@ -7,24 +7,18 @@
             [status-im.ui2.screens.chat.pin-limit-popover.view :as pin-limit-popover]
             [status-im2.common.constants :as constants]
             [status-im2.contexts.chat.messages.list.view :as messages.list]
-            [status-im2.contexts.chat.messages.contact-requests.bottom-drawer :as
-             contact-requests.bottom-drawer]
             [status-im2.contexts.chat.messages.pin.banner.view :as pin.banner] ;;TODO move to status-im2
             [status-im2.navigation.state :as navigation.state]
             [utils.debounce :as debounce]
             [utils.re-frame :as rf]
-            [status-im2.common.not-implemented :as not-implemented]
-            [quo2.foundations.colors :as colors]))
+            [status-im2.common.not-implemented :as not-implemented]))
 
 (defn navigate-back-handler
   []
   (when (and (not @navigation.state/curr-modal) (= (get @re-frame.db/app-db :view-id) :chat))
     (rn/hw-back-remove-listener navigate-back-handler)
     (rf/dispatch [:close-chat])
-    (rf/dispatch [:navigate-back])
-    ;; If true is not returned back button event will bubble up,
-    ;; and will call system back button action
-    true))
+    (rf/dispatch [:navigate-back])))
 
 (defn page-nav
   []
@@ -38,56 +32,44 @@
     [quo/page-nav
      {:align-mid?            true
 
-      :mid-section           (if group-chat
-                               {:type      :text-only
-                                :main-text display-name}
-                               {:type      :user-avatar
-                                :avatar    {:full-name       display-name
-                                            :online?         online?
-                                            :profile-picture photo-path
-                                            :size            :medium}
-                                :main-text display-name
-                                :on-press  #(debounce/dispatch-and-chill [:chat.ui/show-profile chat-id]
-                                                                         1000)})
+      :mid-section
+      (if group-chat
+        {:type      :text-only
+         :main-text display-name}
+        {:type      :user-avatar
+         :avatar    {:full-name       display-name
+                     :online?         online?
+                     :profile-picture photo-path
+                     :size            :medium}
+         :main-text display-name
+         :on-press  #(debounce/dispatch-and-chill [:chat.ui/show-profile chat-id] 1000)})
 
-      :left-section          {:on-press            #(do
-                                                      (rf/dispatch [:close-chat])
-                                                      (rf/dispatch [:navigate-back]))
-                              :icon                :i/arrow-left
-                              :accessibility-label :back-button}
+      :left-section
+      {:on-press            #(do
+                               (rf/dispatch [:close-chat])
+                               (rf/dispatch [:navigate-back]))
+       :icon                :i/arrow-left
+       :accessibility-label :back-button}
 
-      :right-section-buttons [{:on-press            #()
-                               :style               {:border-width 1
-                                                     :border-color :red}
-                               :icon                :i/options
-                               :accessibility-label :options-button}]}]))
+      :right-section-buttons
+      [{:on-press            #()
+        :style               {:border-width 1 :border-color :red}
+        :icon                :i/options
+        :accessibility-label :options-button}]}]))
 
 (defn chat-render
   []
-  (let [{:keys [chat-id
-                contact-request-state
-                show-input?]
-         :as   chat}
-        (rf/sub [:chats/current-chat-chat-view])]
-    [rn/keyboard-avoiding-view {:style {:position :relative :flex 1}}
-     [rn/view
-      {:style {:position         :absolute
-               :top              56
-               :z-index          2
-               :background-color (colors/theme-colors colors/white colors/neutral-100)
-               :width            "100%"}}
-
-      [pin.banner/banner chat-id]
-      [not-implemented/not-implemented
-       [pin-limit-popover/pin-limit-popover chat-id]]]
+  (let [;;NOTE: we want to react only on these fields, do not use full chat map here
+        {:keys [chat-id show-input?] :as chat} (rf/sub [:chats/current-chat-chat-view])]
+    [rn/keyboard-avoiding-view {:style {:flex 1}}
      [page-nav]
+     [not-implemented/not-implemented
+      [pin-limit-popover/pin-limit-popover chat-id]]
+     [not-implemented/not-implemented
+      [pin.banner/banner chat-id]]
      [messages.list/messages-list {:chat chat :show-input? show-input?}]
-     (cond (and (not show-input?)
-                contact-request-state)
-           [contact-requests.bottom-drawer/view chat-id contact-request-state]
-
-           show-input?
-           [composer/composer chat-id])]))
+     (when show-input?
+       [composer/composer chat-id])]))
 
 (defn chat
   []

src/status_im2/contexts/chat/photo_selector/style.cljs

@@ -1,12 +1,13 @@
 (ns status-im2.contexts.chat.photo-selector.style
-  (:require [quo2.foundations.colors :as colors]))
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]))
 
 (defn gradient-container
   [safe-area]
   {:width    "100%"
    :height   (+ (:bottom safe-area) 65)
    :position :absolute
-   :bottom   0})
+   :bottom   (if platform/ios? 0 65)})
 
 (defn buttons-container
   [safe-area]

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

@@ -9,9 +9,8 @@
             [reagent.core :as reagent]
             [status-im2.contexts.chat.photo-selector.style :as style]
             [status-im.utils.core :as utils]
-            [utils.re-frame :as rf]
-            [re-frame.core :as re-frame]
-            status-im2.common.bottom-sheet.view))
+            [quo.react]
+            [utils.re-frame :as rf]))
 
 (def selected (reagent/atom []))
 
@@ -21,7 +20,7 @@
   (doseq [item @selected]
     (rf/dispatch [:chat.ui/camera-roll-pick item]))
   (reset! selected [])
-  (re-frame/dispatch-sync [:dismiss-bottom-sheet]))
+  (rf/dispatch [:bottom-sheet/hide]))
 
 (defn bottom-gradient
   [chat-id selected-images]
@@ -37,9 +36,7 @@
           [quo/button
            {:style               {:align-self        :stretch
                                   :margin-horizontal 20}
-            :on-press            (fn []
-                                   (re-frame/dispatch-sync [:dismiss-bottom-sheet])
-                                   (on-press-confirm-selection chat-id))
+            :on-press            #(on-press-confirm-selection chat-id)
             :accessibility-label :confirm-selection}
            (i18n/label :t/confirm-selection)]])))])
 

src/status_im2/contexts/communities/home/actions/view.cljs

@@ -2,13 +2,11 @@
   (:require [i18n.i18n :as i18n]
             [quo2.core :as quo]
             [react-native.core :as rn]
-            [utils.re-frame :as rf]
-            [re-frame.core :as re-frame]
-            status-im2.common.bottom-sheet.view))
+            [utils.re-frame :as rf]))
 
 (defn hide-sheet-and-dispatch
   [event]
-  (re-frame/dispatch-sync [:dismiss-bottom-sheet])
+  (rf/dispatch [:bottom-sheet/hide])
   (rf/dispatch event))
 
 (def not-joined-options
@@ -89,7 +87,7 @@
              :align-items     :center
              :justify-content :space-evenly}}
     [quo/button
-     {:on-press #(re-frame/dispatch-sync [:dismiss-bottom-sheet])
+     {:on-press #(rf/dispatch [:bottom-sheet/hide])
       :type     :grey
       :style    {:flex         1
                  :margin-right 12}}
@@ -100,8 +98,10 @@
      (i18n/label :t/leave-community)]]])
 
 (defn actions
-  [id]
-  (let [community (rf/sub [:communities/community id])]
+  []
+  (let [community-mock (rf/sub [:get-screen-params :community-overview]) ;;TODO stop using mock data and
+                                                                         ;;only pass community id
+        community      (rf/sub [:communities/community (:id community-mock)])]
     [quo/action-drawer
      [(get (if (:joined community)
              (joined-options (:id community))

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

@@ -16,12 +16,9 @@
                        (rf/dispatch [:communities/load-category-states id])
                        (rf/dispatch [:dismiss-keyboard])
                        (rf/dispatch [:navigate-to-nav2 :community {:community-id id}]))
-      :on-long-press #(rf/dispatch
-                       [:bottom-sheet/show-sheet
-                        {:content       (fn []
-                                          [home.actions/actions id])
-                         :selected-item (fn []
-                                          [quo/communities-membership-list-item {} community-item])}])}
+      :on-long-press #(rf/dispatch [:bottom-sheet/show-sheet
+                                    {:content (fn []
+                                                [home.actions/actions community-item])}])}
      community-item]))
 
 (defn get-item-layout-js
@@ -59,8 +56,9 @@
   (let [ids-by-user-involvement (rf/sub [:communities/community-ids-by-user-involvement])
         tab                     @selected-tab]
     [rn/view
-     {:style {:padding-horizontal 20
-              :padding-vertical   12}}
+     {:style {:padding-left     20
+              :padding-right    8
+              :padding-vertical 12}}
      (case tab
        :joined
        [communities-list (:joined ids-by-user-involvement)]

src/status_im2/contexts/communities/requests/actions/view.cljs

@@ -7,9 +7,7 @@
             [status-im.react-native.resources :as resources]
             [status-im2.contexts.communities.requests.actions.style :as style]
             [utils.re-frame :as rf]
-            [utils.requests :as requests]
-            [re-frame.core :as re-frame]
-            status-im2.common.bottom-sheet.view))
+            [utils.requests :as requests]))
 
 ;; TODO: update with real data
 (def community-rules
@@ -118,7 +116,7 @@
         {:style style/request-button}
         [quo/button
          {:accessibility-label :cancel
-          :on-press            #(re-frame/dispatch-sync [:dismiss-bottom-sheet])
+          :on-press            #(rf/dispatch [:bottom-sheet/hide])
           :type                :grey
           :style               style/cancel-button} (i18n/label :t/cancel)]
         [quo/button
@@ -127,12 +125,12 @@
                                  (when-not joined
                                    (when can-join?
                                      (rf/dispatch [::communities/join id]))
-                                   (re-frame/dispatch-sync [:dismiss-bottom-sheet])
+                                   (rf/dispatch [:bottom-sheet/hide])
                                    (when
                                      (and can-request-access?
                                           (not (pos? requested-to-join-at))
                                           (requests/can-request-access-again? requested-to-join-at))
                                      (rf/dispatch [::communities/request-to-join id])
-                                     (re-frame/dispatch-sync [:dismiss-bottom-sheet]))))
+                                     (rf/dispatch [:bottom-sheet/hide]))))
           :disabled            (not @agreed-to-rules?)
           :style               {:flex 1}} (request-to-join-text is-open?)]]])))

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

@@ -12,17 +12,16 @@
    {:label "number of messages"
     :key   :pins-count
     :type  :text}
-   {:label "hide pin icon?"
-    :key   :hide-pin?
+   {:label "show pin icon?"
+    :key   :show-pin?
     :type  :boolean}
   ])
 
 (defn cool-preview
   []
-  (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 {:show-pin?       true
+                             :pins-count      2
+                             :latest-pin-text "Be respectful of fellow community member..."})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
        [rn/view {:padding-bottom 150}

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

@@ -10,7 +10,7 @@
   ([text id opts]
    (let [toast-opts (rf/sub [:toasts/toast id])
          dismiss!   #(rf/dispatch [:toasts/close id])
-         toast!     #(rf/dispatch [:toasts/upsert (assoc opts :id id)])
+         toast!     #(rf/dispatch [:toasts/upsert id opts])
          dismissed? (not toast-opts)]
      [rn/view {:style {:margin-bottom 10}}
       [button/button
@@ -34,7 +34,7 @@
     :duration      4000
     :undo-duration 4
     :undo-on-press #(do
-                      (rf/dispatch [:toasts/upsert
+                      (rf/dispatch [:toasts/create
                                     {:icon       :placeholder
                                      :icon-color "green"
                                      :text       "Undo pressed"}])
@@ -53,7 +53,7 @@
     :undo-on-press
     #(do
        (rf/dispatch
-        [:toasts/upsert
+        [:toasts/create
          {:icon :placeholder :icon-color "green" :text "Undo pressed"}])
        (rf/dispatch [:toasts/close "Toast: with undo action"]))}])
 
@@ -78,8 +78,8 @@
              :on-press
              #(rf/dispatch
                [:toasts/upsert
-                {:id         "Toast: 30s duration"
-                 :icon       :placeholder
+                "Toast: 30s duration"
+                {:icon       :placeholder
                  :icon-color "red"
                  :text       (str "This is an updated example toast" " - " (swap! suffix inc))
                  :duration   3000}])}

src/status_im2/contexts/quo_preview/tabs/tabs.cljs

@@ -12,15 +12,11 @@
     :options [{:key   32
                :value "32"}
               {:key   24
-               :value "24"}]}
-   {:label "Scrollable:"
-    :key   :scrollable?
-    :type  :boolean}])
+               :value "24"}]}])
 
 (defn cool-preview
   []
-  (let [state (reagent/atom {:size        32
-                             :scrollable? false})]
+  (let [state (reagent/atom {:size 32})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
        [rn/view {:padding-bottom 150}
@@ -37,11 +33,7 @@
                                    {:id 2 :label "Tab 2"}
                                    {:id 3 :label "Tab 3"}
                                    {:id 4 :label "Tab 4"}]
-                  :on-change      #(println "Active tab" %)}
-                 (when (:scrollable? @state)
-                   {:scroll-on-press?    true
-                    :fade-end-percentage 0.4
-                    :fade-end?           true}))]]]])))
+                  :on-change      #(println "Active tab" %)})]]]])))
 
 (defn preview-tabs
   []

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

@@ -1,98 +0,0 @@
-(ns status-im2.contexts.quo-preview.tags.tag
-  (:require [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
-            [quo2.foundations.colors :as colors]
-            [quo2.components.tags.tag :as tag]
-            [status-im.ui.components.react :as react]
-            [status-im.react-native.resources :as resources]
-            [reagent.core :as reagent]))
-
-(def descriptor
-  [{:label   "Size:"
-    :key     :size
-    :type    :select
-    :options [{:key   32
-               :value "32"}
-              {:key   24
-               :value "24"}]}
-   {:label   "Type:"
-    :key     :type
-    :type    :select
-    :options [{:key   :emoji
-               :value "Emoji"}
-              {:key   :icon
-               :value "Icons"}
-              {:key   :label
-               :value "Label"}]}
-   {:label "Labelled:"
-    :key   :labelled?
-    :type  :boolean}
-   {:label "Disabled:"
-    :key   :disabled?
-    :type  :boolean}
-   {:label "Blurred background:"
-    :key   :blurred?
-    :type  :boolean}])
-
-(defn cool-preview
-  []
-  (let [state (reagent/atom {:size      32
-                             :labelled? true
-                             :type      :emoji})]
-    (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view
-        {:style {:padding-bottom 150
-                 :padding-top    60}}
-        [rn/view {:flex 1}
-         [preview/customizer state descriptor]]
-        [rn/view
-         {:style {:flex               1
-                  :justify-content    :center
-                  :top                60
-                  :padding-horizontal 16}}
-         (when (:blurred? @state)
-           [rn/view
-            {:style {:flex   1
-                     :height 100}}
-            [react/image
-             {:source (resources/get-image :community-cover)
-              :style  {:flex          1
-                       :width         "100%"
-                       :border-radius 16}}]
-            [react/blur-view
-             {:flex          1
-              :style         {:border-radius 16
-                              :height        100
-                              :position      :absolute
-                              :left          0
-                              :right         0}
-              :blur-amount   20
-              :overlay-color (colors/theme-colors
-                              colors/white-opa-70
-                              colors/neutral-80-opa-80)}]])
-         [rn/view
-          {:style {:position   :absolute
-                   :align-self :center}}
-          [tag/tag
-           (merge @state
-                  {:id        1
-                   :label     "Tag"
-                   :labelled? (if (= (:type @state) :label)
-                                true
-                                (:labelled? @state))
-                   :resource  (if (= :emoji (:type @state))
-                                (resources/get-image :music)
-                                :main-icons2/placeholder)})]]]]])))
-(defn preview-tag
-  []
-  [rn/view
-   {:flex             1
-    :background-color (colors/theme-colors
-                       colors/white
-                       colors/neutral-90)}
-   [rn/flat-list
-    {:flex                      1
-     :keyboardShouldPersistTaps :always
-     :header                    [cool-preview]
-     :key-fn                    str}]])

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

@@ -24,85 +24,70 @@
                :value "Icons"}
               {:key   :label
                :value "Label"}]}
-   {:label "Scrollable:"
-    :key   :scrollable?
-    :type  :boolean}
-   {:label   "Fade Out:"
-    :key     :fade-end-percentage
-    :type    :select
-    :options [{:key   1
-               :value "1%"}
-              {:key   0.4
-               :value "0.4%"}]}
    {:label "Labelled:"
-    :key   :labelled?
+    :key   :labelled
     :type  :boolean}
    {:label "Disabled:"
-    :key   :disabled?
+    :key   :disabled
     :type  :boolean}
    {:label "Blurred background:"
-    :key   :blurred?
+    :key   :blurred
     :type  :boolean}])
 
 (defn cool-preview
   []
-  (let [state (reagent/atom {:size                32
-                             :labelled?           true
-                             :type                :emoji
-                             :fade-end-percentage 0.4
-                             :scrollable?         false})]
+  (let [state (reagent/atom {:size     32
+                             :labelled true
+                             :type     :emoji})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
        [rn/view
-        {:style {:padding-bottom 150
-                 :padding-top    60}}
-        [rn/view {:style {:flex 1}}
+        {:padding-bottom 150
+         :padding-top    60}
+        [rn/view {:flex 1}
          [preview/customizer state descriptor]]
         [rn/view
-         {:style {:flex               1
-                  :justify-content    :center
-                  :top                60
-                  :padding-horizontal 16}}
-         (when (:blurred? @state)
-           [rn/view
-            {:align-items   :center
-             :height        100
-             :border-radius 16}
-            [react/image
-             {:source (resources/get-image :community-cover)
-              :style  {:flex          1
-                       :width         "100%"
-                       :border-radius 16}}]
-            [react/blur-view
-             {:flex          1
-              :style         {:border-radius 16
-                              :height        100
-                              :position      :absolute
-                              :left          0
-                              :right         0}
-              :blur-amount   20
-              :overlay-color (colors/theme-colors
-                              colors/white-opa-70
-                              colors/neutral-80-opa-80)}]])
-         [rn/view
-          {:style {:position   :absolute
-                   :align-self :center}}
+         {:flex            1
+          :justify-content :center
+          :top             60}
+         (when (:blurred @state)
+           [rn/view {:flex 1}
+            [react/view
+             {:flex-direction :row
+              :height         100}
+             [react/image
+              {:source (resources/get-image :community-cover)
+               :style  {:flex          1
+                        :height        100
+                        :border-radius 16}}]]
+            [react/view
+             {:flex-direction :row
+              :height         100
+              :position       :absolute
+              :left           0
+              :right          0}
+             [react/blur-view
+              {:flex          1
+               :style         {:border-radius 16
+                               :height        100}
+               :blur-amount   40
+               :overlay-color (colors/theme-colors
+                               colors/white-opa-70
+                               colors/neutral-80-opa-80)}]]])
+         [rn/scroll-view
+          {:justify-content    :center
+           :align-items        :center
+           :position           :absolute
+           :padding-horizontal 10}
           [tags/tags
            (merge
             @state
             {:default-active 1
-             :component      :tags
-             :labelled?      (if (= :label type) true (:labelled? @state))
-             :resource       (when (= type :icon)
-                               :main-icons2/placeholder)
-             :data           [{:id 1 :label "Music" :resource (resources/get-image :music)}
-                              {:id 2 :label "Lifestyle" :resource (resources/get-image :lifestyle)}
-                              {:id 2 :label "Podcasts" :resource (resources/get-image :podcasts)}
-                              {:id 2 :label "Music" :resource (resources/get-image :music)}
-                              {:id 3 :label "Lifestyle" :resource (resources/get-image :lifestyle)}]}
-            (when (:scrollable? @state)
-              {:scroll-on-press? true
-               :fade-end?        true}))]]]]])))
+             :data           [{:id 1 :tag-label "Music" :resource (resources/get-image :music)}
+                              {:id 2 :tag-label "Lifestyle" :resource (resources/get-image :lifestyle)}
+                              {:id        3
+                               :tag-label "Podcasts"
+                               :resource  (resources/get-image :podcasts)}]})]]]]])))
 (defn preview-tags
   []
   [rn/view

src/status_im2/setup/db.cljs

@@ -34,7 +34,6 @@
    :chat/spam-messages-frequency       0
    :chats-home-list                    #{}
    :home-items-show-number             20
-   :toasts                             {:ordered '() :toasts {}}
    :tooltips                           {}
    :dimensions/window                  (rn/get-window)
    :registry                           {}

src/status_im2/subs/chat/chats.cljs

@@ -171,10 +171,11 @@
  :<- [:multiaccount/public-key]
  :<- [:communities/current-community]
  :<- [:contacts/blocked-set]
- :<- [:contacts/contacts-raw]
+ :<- [:contacts/contacts]
  :<- [:chat/inputs]
+ :<- [:mutual-contact-requests/enabled?]
  (fn [[{:keys [group-chat chat-id] :as current-chat} my-public-key community blocked-users-set contacts
-       inputs]]
+       inputs mutual-contact-requests-enabled?]]
    (when current-chat
      (cond-> current-chat
        (chat.models/public-chat? current-chat)
@@ -190,35 +191,23 @@
        (assoc :show-input? true)
 
        (not group-chat)
-       (assoc
-        :contact-request-state (get-in contacts [chat-id :contact-request-state])
-        :show-input?
-        (and
-         (or
-          (get-in inputs [chat-id :metadata :sending-contact-request])
-          (= constants/contact-request-state-mutual
-             (get-in contacts [chat-id :contact-request-state])))
-         (not (contains? blocked-users-set chat-id))))))))
+       (assoc :show-input?
+              (and
+               (or
+                (not mutual-contact-requests-enabled?)
+                (get-in inputs [chat-id :metadata :sending-contact-request])
+                (and mutual-contact-requests-enabled?
+                     (= constants/contact-request-state-mutual
+                        (get-in contacts [chat-id :contact-request-state]))))
+               (not (contains? blocked-users-set chat-id))))))))
 
 (re-frame/reg-sub
  :chats/current-chat-chat-view
  :<- [:chats/current-chat]
  (fn [current-chat]
    (select-keys current-chat
-                [:chat-id
-                 :show-input?
-                 :group-chat
-                 :admins
-                 :invitation-admin
-                 :public?
-                 :chat-type
-                 :color
-                 :contact-request-state
-                 :chat-name
-                 :synced-to
-                 :synced-from
-                 :community-id
-                 :emoji])))
+                [:chat-id :show-input? :group-chat :admins :invitation-admin :public? :chat-type :color
+                 :chat-name :synced-to :synced-from :community-id :emoji])))
 
 (re-frame/reg-sub
  :current-chat/metadata

src/status_im2/subs/chat/chats_test.cljs

@@ -1,57 +0,0 @@
-(ns status-im2.subs.chat.chats-test
-  (:require [cljs.test :refer [is testing]]
-            [re-frame.db :as rf-db]
-            [test-helpers.unit :as h]
-            [status-im2.common.constants :as constants]
-            [utils.re-frame :as rf]))
-
-(def public-key "0xpk")
-(def multiaccount {:public-key public-key})
-(def chat-id "1")
-(def chat {:chat-id chat-id})
-
-(def private-group-chat
-  (assoc
-   chat
-   :members    #{{:id public-key}}
-   :group-chat true
-   :chat-type  constants/private-group-chat-type))
-
-(def one-to-one-chat
-  (assoc
-   chat
-   :chat-type
-   constants/one-to-one-chat-type))
-
-(h/deftest-sub :chats/current-chat
-  [sub-name]
-  (testing "private group chat, user is a member"
-    (let [chats {chat-id private-group-chat}]
-      (swap! rf-db/app-db assoc
-        :multiaccount    multiaccount
-        :current-chat-id chat-id
-        :chats           chats)
-      (is (true? (:show-input? (rf/sub [sub-name]))))))
-  (testing "private group chat, user is not member"
-    (let [chats {chat-id (dissoc private-group-chat :members)}]
-      (swap! rf-db/app-db assoc
-        :multiaccount    multiaccount
-        :current-chat-id chat-id
-        :chats           chats)
-      (is (not (:show-input? (rf/sub [sub-name]))))))
-  (testing "one to one chat, mutual contacts"
-    (let [chats {chat-id one-to-one-chat}]
-      (swap! rf-db/app-db assoc
-        :contacts/contacts {chat-id {:contact-request-state constants/contact-request-state-mutual}}
-        :multiaccount      multiaccount
-        :current-chat-id   chat-id
-        :chats             chats)
-      (is (:show-input? (rf/sub [sub-name])))))
-  (testing "one to one chat, not a contact"
-    (let [chats {chat-id one-to-one-chat}]
-      (swap! rf-db/app-db assoc
-        :contacts/contacts {chat-id {:contact-request-state constants/contact-request-state-sent}}
-        :multiaccount      multiaccount
-        :current-chat-id   chat-id
-        :chats             chats)
-      (is (not (:show-input? (rf/sub [sub-name])))))))

src/status_im2/subs/communities.cljs

@@ -137,7 +137,7 @@
    :muted?                (:muted community)
    :unread-messages?      (pos? (:unviewed-messages-count counts))
    :unread-mentions-count (:unviewed-mentions-count counts)
-   :community-icon        (:images community)})
+   :community-icon        (get-in community [:images :thumbnail :uri])})
 
 (re-frame/reg-sub
  :communities/home-item

src/status_im2/subs/contact.cljs

@@ -8,8 +8,7 @@
             [status-im.ui.screens.profile.visibility-status.utils :as visibility-status-utils]
             [status-im.utils.gfycat.core :as gfycat]
             [status-im.utils.image-server :as image-server]
-            [utils.collection]
-            [status-im.constants :as constants]))
+            [utils.collection]))
 
 (re-frame/reg-sub
  ::query-current-chat-contacts
@@ -24,6 +23,12 @@
  (fn [multiaccount]
    (get multiaccount :profile-pictures-show-to)))
 
+(re-frame/reg-sub
+ :mutual-contact-requests/enabled?
+ :<- [:multiaccount]
+ (fn [settings]
+   (boolean (:mutual-contact-enabled? settings))))
+
 (re-frame/reg-sub
  ::profile-pictures-visibility
  :<- [:multiaccount]
@@ -88,7 +93,7 @@
        vals)))
 
 (re-frame/reg-sub
- :contacts/grouped-by-first-letter
+ :contacts/add-members-sections
  :<- [:contacts/current-chat-contacts]
  :<- [:contacts/active]
  (fn [[members contacts]]
@@ -103,23 +108,6 @@
        sort
        vals)))
 
-(re-frame/reg-sub
- :contacts/sorted-and-grouped-by-first-letter
- :<- [:contacts/active]
- :<- [:selected-contacts-count]
- (fn [[contacts selected-contacts-count]]
-   (->> contacts
-        (filter :mutual?)
-        (map #(assoc %
-                     :allow-new-users?
-                     (< selected-contacts-count
-                        (dec constants/max-group-chat-participants))))
-        (group-by (comp (fnil string/upper-case "") first :alias))
-        (sort-by (fn [[title]] title))
-        (map (fn [[title data]]
-               {:title title
-                :data  data})))))
-
 (re-frame/reg-sub
  :contacts/sorted-contacts
  :<- [:contacts/active]

src/status_im2/subs/contact_test.cljs

@@ -1,183 +0,0 @@
-(ns status-im2.subs.contact-test
-  (:require [cljs.test :refer [is testing]]
-            [re-frame.db :as rf-db]
-            [test-helpers.unit :as h]
-            status-im2.subs.contact
-            [utils.re-frame :as rf]))
-
-(def ^:private contacts-sample-data
-  {:selected-contacts-count 1
-   :contacts/contacts       {"0xtest"  {:last-updated          1672582629695
-                                        :mutual?               true
-                                        :contactRequestClock   0
-                                        :images                {}
-                                        :added                 true
-                                        :name                  "slim.shady"
-                                        :Removed               false
-                                        :trustStatus           0
-                                        :alias                 "Real Slim Shady"
-                                        :bio                   ""
-                                        :IsSyncing             false
-                                        :display-name          ""
-                                        :ens-verified          true
-                                        :socialLinks           nil
-                                        :blocked               false
-                                        :verificationStatus    0
-                                        :lastUpdatedLocally    1672582563204
-                                        :public-key            "0xtest"
-                                        :has-added-us          true
-                                        :contact-request-state 1}
-                             "0xtest2" {:last-updated          1672582629695
-                                        :mutual?               true
-                                        :contactRequestClock   0
-                                        :images                {}
-                                        :added                 true
-                                        :name                  "slim.shady"
-                                        :Removed               false
-                                        :trustStatus           0
-                                        :alias                 "Fake Slim Shady"
-                                        :bio                   ""
-                                        :IsSyncing             false
-                                        :display-name          ""
-                                        :ens-verified          true
-                                        :socialLinks           nil
-                                        :blocked               false
-                                        :verificationStatus    0
-                                        :lastUpdatedLocally    1672582563204
-                                        :public-key            "0xtest"
-                                        :has-added-us          true
-                                        :contact-request-state 1}
-                             "0xtest3" {:last-updated          1672582629695
-                                        :mutual?               true
-                                        :contactRequestClock   0
-                                        :images                {}
-                                        :added                 true
-                                        :name                  "slim.shady"
-                                        :Removed               false
-                                        :trustStatus           0
-                                        :alias                 "Instant noodles"
-                                        :bio                   ""
-                                        :IsSyncing             false
-                                        :display-name          ""
-                                        :ens-verified          true
-                                        :socialLinks           nil
-                                        :blocked               false
-                                        :verificationStatus    0
-                                        :lastUpdatedLocally    1672582563204
-                                        :public-key            "0xtest"
-                                        :has-added-us          true
-                                        :contact-request-state 1}}})
-
-(def ^:private expected-sorted-contacts
-  '({:title "F"
-     :data  ({:active?               true
-              :last-updated          1672582629695
-              :mutual?               true
-              :blocked?              false
-              :contactRequestClock   0
-              :images                {}
-              :added                 true
-              :name                  "slim.shady"
-              :added?                true
-              :Removed               false
-              :trustStatus           0
-              :alias                 "Fake Slim Shady"
-              :bio                   ""
-              :IsSyncing             false
-              :display-name          ""
-              :ens-verified          true
-              :socialLinks           nil
-              :blocked               false
-              :allow-new-users?      true
-              :verificationStatus    0
-              :lastUpdatedLocally    1672582563204
-              :public-key            "0xtest"
-              :names                 {:nickname         nil
-                                      :display-name     ""
-                                      :three-words-name "Fake Slim Shady"
-                                      :ens-name         "@slim.shady"}
-              :has-added-us          true
-              :contact-request-state 1})}
-    {:title "I"
-     :data  ({:active?               true
-              :last-updated          1672582629695
-              :mutual?               true
-              :blocked?              false
-              :contactRequestClock   0
-              :images                {}
-              :added                 true
-              :name                  "slim.shady"
-              :added?                true
-              :Removed               false
-              :trustStatus           0
-              :alias                 "Instant noodles"
-              :bio                   ""
-              :IsSyncing             false
-              :display-name          ""
-              :ens-verified          true
-              :socialLinks           nil
-              :blocked               false
-              :allow-new-users?      true
-              :verificationStatus    0
-              :lastUpdatedLocally    1672582563204
-              :public-key            "0xtest"
-              :names                 {:nickname         nil
-                                      :display-name     ""
-                                      :three-words-name "Instant noodles"
-                                      :ens-name         "@slim.shady"}
-              :has-added-us          true
-              :contact-request-state 1})}
-    {:title "R"
-     :data  ({:active?               true
-              :last-updated          1672582629695
-              :mutual?               true
-              :blocked?              false
-              :contactRequestClock   0
-              :images                {}
-              :added                 true
-              :name                  "slim.shady"
-              :added?                true
-              :Removed               false
-              :trustStatus           0
-              :alias                 "Real Slim Shady"
-              :bio                   ""
-              :IsSyncing             false
-              :display-name          ""
-              :ens-verified          true
-              :socialLinks           nil
-              :blocked               false
-              :allow-new-users?      true
-              :verificationStatus    0
-              :lastUpdatedLocally    1672582563204
-              :public-key            "0xtest"
-              :names                 {:nickname         nil
-                                      :display-name     ""
-                                      :three-words-name "Real Slim Shady"
-                                      :ens-name         "@slim.shady"}
-              :has-added-us          true
-              :contact-request-state 1})}))
-
-(h/deftest-sub :contacts/sorted-and-grouped-by-first-letter
-  [sub-name]
-  (testing "Returning empty sequence when no contacts"
-    (swap! rf-db/app-db merge (assoc contacts-sample-data :contacts/contacts {}))
-    (is (empty? (rf/sub [sub-name]))))
-  (testing "Returning empty sequence when no mutual contacts"
-    (let [remove-contact-as-mutual #(-> %
-                                        (assoc-in ["0xtest" :mutual?] false)
-                                        (assoc-in ["0xtest2" :mutual?] false)
-                                        (assoc-in ["0xtest3" :mutual?] false))]
-      (swap! rf-db/app-db merge
-        (update contacts-sample-data :contacts/contacts remove-contact-as-mutual))
-      (is (empty? (rf/sub [sub-name])))))
-  (testing "Returning sorted contacts"
-    (swap! rf-db/app-db merge contacts-sample-data)
-    (let [contact-list-without-identicons (map (fn [contact-group]
-                                                 (update contact-group
-                                                         :data
-                                                         #(map (fn [contact]
-                                                                 (dissoc contact :identicon))
-                                                               %)))
-                                               (rf/sub [sub-name]))]
-
-      (is (= expected-sorted-contacts contact-list-without-identicons)))))

src/status_im2/subs/general.cljs

@@ -198,22 +198,6 @@
  (fn [seed]
    (or seed {:step :intro})))
 
-(re-frame/reg-sub
- :bottom-sheet/config
- (fn [db]
-   (let [content-height      (get-in db [:bottom-sheet/config :content-height])
-         show-bottom-sheet?  (get-in db [:bottom-sheet/config :show-bottom-sheet?])
-         keyboard-was-shown? (get-in db [:bottom-sheet/config :keyboard-was-shown?])
-         expanded?           (get-in db [:bottom-sheet/config :expanded?])
-         gesture-running?    (get-in db [:bottom-sheet/config :gesture-running?])
-         animation-delay     (get-in db [:bottom-sheet/config :animation-delay])]
-     {:content-height      (or content-height nil)
-      :show-bottom-sheet?  (or show-bottom-sheet? nil)
-      :keyboard-was-shown? (or keyboard-was-shown? false)
-      :expanded?           (or expanded? false)
-      :gesture-running?    (or gesture-running? false)
-      :animation-delay     (or animation-delay 450)})))
-
 (re-frame/reg-sub
  :bottom-sheet
  :<- [:bottom-sheet/show?]

src/status_im2/subs/root.cljs

@@ -37,7 +37,6 @@
 (reg-root-key-sub :bottom-sheet/show? :bottom-sheet/show?)
 (reg-root-key-sub :bottom-sheet/view :bottom-sheet/view)
 (reg-root-key-sub :bottom-sheet/options :bottom-sheet/options)
-(reg-root-key-sub :bottom-sheet/config :bottom-sheet/config)
 
 ;;general
 (reg-root-key-sub :sync-state :sync-state)

src/status_im2/subs/shell.cljs

@@ -102,7 +102,7 @@
    {:content  {:community-channel {:emoji        (:emoji channel)
                                    :channel-name (str "# " (:name channel))}}
     :on-press (fn []
-                (re-frame/dispatch [:navigate-to-nav2 :community {:community-id community-id}])
+                (re-frame/dispatch [:navigate-to :community {:community-id community-id}])
                 (js/setTimeout
                  #(re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 channel-id true])
                  100))}))

src/status_im2/subs/toasts.cljs

@@ -6,9 +6,3 @@
  :<- [:toasts]
  (fn [toasts [_ toast-id]]
    (get-in toasts [:toasts toast-id])))
-
-(re-frame/reg-sub
- :toasts/toast-cursor
- :<- [:toasts]
- (fn [toasts [_ toast-id & cursor]]
-   (get-in toasts (into [:toasts toast-id] cursor))))

test/appium/support/base_test_report.py

@@ -84,18 +84,10 @@ class BaseTestReport:
         tests = self.get_all_tests()
         failed = list()
         for test in tests:
-            if not self.is_test_successful(test) and not self.is_test_xfailed(test):
+            if not self.is_test_successful(test):
                 failed.append(test)
         return failed
 
-    def get_xfailed_tests(self):
-        tests = self.get_all_tests()
-        xfailed = list()
-        for test in tests:
-            if self.is_test_xfailed(test) and not self.is_test_successful(test):
-                xfailed.append(test)
-        return xfailed
-
     def get_passed_tests(self):
         tests = self.get_all_tests()
         passed = list()
@@ -134,11 +126,6 @@ class BaseTestReport:
         # Test passed if last testrun has passed
         return test.testruns[-1].error is None
 
-    @staticmethod
-    def is_test_xfailed(test):
-    # Test failed if xfail is defined
-        return test.testruns[-1].xfail != ""
-
     @staticmethod
     def separate_xfail_error(error):
         issue_id_list = re.findall(r'#\d+', error)

test/appium/support/github_report.py

@@ -21,7 +21,6 @@ class GithubHtmlReport(BaseTestReport):
         tests = self.get_all_tests()
         passed_tests = self.get_passed_tests()
         failed_tests = self.get_failed_tests()
-        xfailed_tests = self.get_xfailed_tests()
         not_executed_tests = TestrailReport().get_not_executed_tests(run_id)
 
         if len(tests) > 0:
@@ -33,7 +32,9 @@ class GithubHtmlReport(BaseTestReport):
             if not_executed_tests:
                 summary_html += "Not executed tests: %d\n" % len(not_executed_tests)
             summary_html += "```\n"
-            failed_tests_html, xfailed_tests_html, passed_tests_html, not_executed_tests_html = str(), str(), str(), str()
+            not_executed_tests_html = str()
+            failed_tests_html = str()
+            passed_tests_html = str()
             if not_executed_tests:
                 not_executed_tests_html = self.build_tests_table_html(not_executed_tests, run_id,
                                                                       not_executed_tests=True)
@@ -43,26 +44,19 @@ class GithubHtmlReport(BaseTestReport):
             if failed_tests:
                 failed_tests_html = self.build_tests_table_html(failed_tests, run_id, failed_tests=True)
                 summary_html += "```\n"
-                summary_html += 'IDs of failed tests(should be reviewed): %s \n' % self.list_of_failed_testrail_ids(failed_tests)
-                summary_html += "```\n"
-            if xfailed_tests:
-                xfailed_tests_html = self.build_tests_table_html(xfailed_tests, run_id, failed_tests=False, xfailed_tests=True)
-                summary_html += "```\n"
-                summary_html += 'IDs of failed tests(existing issues): %s \n' % self.list_of_failed_testrail_ids(xfailed_tests)
+                summary_html += 'IDs of failed tests: %s \n' % self.list_of_failed_testrail_ids(failed_tests)
                 summary_html += "```\n"
             if passed_tests:
                 passed_tests_html = self.build_tests_table_html(passed_tests, run_id, failed_tests=False)
-            return title_html + summary_html + not_executed_tests_html + failed_tests_html + passed_tests_html + xfailed_tests_html
+            return title_html + summary_html + not_executed_tests_html + failed_tests_html + passed_tests_html
         else:
             return None
 
-    def build_tests_table_html(self, tests, run_id, failed_tests=False, not_executed_tests=False, xfailed_tests=False):
+    def build_tests_table_html(self, tests, run_id, failed_tests=False, not_executed_tests=False):
         if failed_tests:
-            tests_type = "Failed tests (for review)"
+            tests_type = "Failed tests"
         elif not_executed_tests:
             tests_type = "Not executed tests"
-        elif xfailed_tests:
-            tests_type = "Failed tests (known)"
         else:
             tests_type = "Passed tests"
         html = "<h3>%s (%d)</h3>" % (tests_type, len(tests))

test/appium/support/testrail_report.py

@@ -28,8 +28,7 @@ class TestrailReport(BaseTestReport):
 
         self.outcomes = {
             'passed': 1,
-            'undefined_fail': 10,
-            'fail': 5}
+            'undefined_fail': 10}
 
         self.headers = dict()
         self.headers['Authorization'] = 'Basic %s' % str(
@@ -182,7 +181,6 @@ class TestrailReport(BaseTestReport):
             test_steps = "# Steps: \n"
             devices = str()
             last_testrun = test.testruns[-1]
-            status = self.outcomes['passed']
             for step in last_testrun.steps:
                 test_steps += step + "\n"
             for i, device in enumerate(last_testrun.jobs):
@@ -194,12 +192,7 @@ class TestrailReport(BaseTestReport):
             comment = str()
             if test.group_name:
                 comment += "# Class: %s \n" % test.group_name
-            if last_testrun.error and not last_testrun.xfail:
-                status = self.outcomes['fail']
-                error = last_testrun.error
-                comment += '%s' % ('# Error: \n %s \n' % emoji.demojize(error)) + devices + test_steps
-            elif last_testrun.error and last_testrun.xfail:
-                status = self.outcomes['undefined_fail']
+            if last_testrun.error:
                 full_error = last_testrun.error
                 (code_error, no_code_error_str, issue_id) = self.separate_xfail_error(full_error)
                 if issue_id:
@@ -213,7 +206,7 @@ class TestrailReport(BaseTestReport):
                 comment += devices + test_steps
             data.append(
                 {'case_id': test.testrail_case_id,
-                 'status_id': status,
+                 'status_id': self.outcomes['undefined_fail'] if last_testrun.error else self.outcomes['passed'],
                  'comment': comment})
 
         results = self.post('add_results_for_cases/%s' % self.run_id, data={"results": data})
@@ -246,77 +239,58 @@ class TestrailReport(BaseTestReport):
 
         self.change_test_run_description()
 
-    def make_single_group_report(self, tests, xfailed=False):
-        single_devices_block, group_blocks, case_info, test_ids = str(), dict(), str(), []
-        for test in tests:
-            if test.group_name:
-                group_blocks[test.group_name] = "\n-------\n## Class: %s:\n" % test.group_name
-        for test in tests:
-            last_testrun = test.testruns[-1]
-            test_rail_link = self.get_test_result_link(self.run_id, test.testrail_case_id)
-            test_ids.append(test.testrail_case_id)
-            case_title = '\n'
-            case_title += '-------\n'
-            case_title += "### ID %s: [%s](%s) \n" % (test.testrail_case_id, test.name, test_rail_link)
-            if xfailed:
-                full_error = last_testrun.error[-255:]
-                (code_error, no_code_error_str, issue_id) = self.separate_xfail_error(full_error)
-                if issue_id:
-                    test_rail_xfail = self.make_error_with_gh_issue_link(no_code_error_str, issue_id)
-                    error = "```%s```\n **%s**  \n" % (code_error, test_rail_xfail)
-                else:
-                    error = "```%s```\n **%s**  \n" % (code_error, no_code_error_str)
-            else:
-                error = last_testrun.error[-255:]
-            for job_id, f in last_testrun.jobs.items():
-                if last_testrun.first_commands:
-                    job_url = self.get_sauce_job_url(job_id=job_id,
-                                                     first_command=last_testrun.first_commands[job_id])
-                else:
-                    job_url = self.get_sauce_job_url(job_id=job_id)
-                case_info = "Logs for device %d: [steps](%s), [failure screenshot](%s)" \
-                            % (f, job_url, self.get_sauce_final_screenshot_url(job_id))
-
-            if test.group_name:
-                group_blocks[test.group_name] += case_title + error + case_info
-            else:
-                single_devices_block += case_title + error + case_info
-        description = single_devices_block + ''.join([i for i in group_blocks.values()])
-        return description, test_ids
-
     def change_test_run_description(self):
         tests = self.get_all_tests()
         passed_tests = self.get_passed_tests()
         failed_tests = self.get_failed_tests()
-        xfailed_tests = self.get_xfailed_tests()
         not_executed_tests = self.get_not_executed_tests(self.run_id)
         final_description = "Nothing to report this time..."
         if len(tests) > 0:
-            description = ""
             description_title = "# %.0f%% of end-end tests have passed\n" % (len(passed_tests) / len(tests) * 100)
             description_title += "\n"
             description_title += "Total executed tests: %d\n" % len(tests)
-            description_title += "Undefined failed tests: %d\n" % len(failed_tests)
-            description_title += "Failed tests: %d\n" % len(xfailed_tests)
+            description_title += "Failed tests: %d\n" % len(failed_tests)
             description_title += "Passed tests: %d\n" % len(passed_tests)
             if not_executed_tests:
                 description_title += "Not executed tests: %d\n" % len(not_executed_tests)
             description_title += "\n"
+            ids_failed_test = []
+            single_devices_block, group_blocks, case_info = str(), dict(), str()
             if failed_tests:
-                description += "\n"
-                description += "## Undefined failed tests:"
-                failed_description, ids_failed_test = self.make_single_group_report(failed_tests)
-                description += failed_description
-                description_title += "## Undefined failed tests: %s\n" % ','.join([str(i) for i in ids_failed_test])
-            if xfailed_tests:
-                description += "\n"
-                description += "## Failed tests (due to known issues):"
-                xfailed_description, id_xfailed_tests = self.make_single_group_report(xfailed_tests, xfailed=True)
-                description += xfailed_description
-                description_title += "## Failed tests: %s\n" % ','.join([str(i) for i in id_xfailed_tests])
+                for test in failed_tests:
+                    if test.group_name:
+                        group_blocks[test.group_name] = "\n-------\n## Class: %s:\n" % test.group_name
+                for test in failed_tests:
+                    last_testrun = test.testruns[-1]
+                    test_rail_link = self.get_test_result_link(self.run_id, test.testrail_case_id)
+                    ids_failed_test.append(test.testrail_case_id)
+                    case_title = '\n'
+                    case_title += '-------\n'
+                    case_title += "### ID %s: [%s](%s) \n" % (test.testrail_case_id, test.name, test_rail_link)
+                    full_error = last_testrun.error[-255:]
+                    (code_error, no_code_error_str, issue_id) = self.separate_xfail_error(full_error)
+                    if issue_id:
+                        test_rail_xfail = self.make_error_with_gh_issue_link(no_code_error_str, issue_id)
+                        error = "```%s```\n **%s**  \n" % (code_error, test_rail_xfail)
+                    else:
+                        error = "```%s```\n **%s**  \n" % (code_error, no_code_error_str)
+                    for job_id, f in last_testrun.jobs.items():
+                        if last_testrun.first_commands:
+                            job_url = self.get_sauce_job_url(job_id=job_id,
+                                                             first_command=last_testrun.first_commands[job_id])
+                        else:
+                            job_url = self.get_sauce_job_url(job_id=job_id)
+                        case_info = "Logs for device %d: [steps](%s), [failure screenshot](%s)" \
+                                    % (f, job_url, self.get_sauce_final_screenshot_url(job_id))
+
+                    if test.group_name:
+                        group_blocks[test.group_name] += case_title + error + case_info
+                    else:
+                        single_devices_block += case_title + error + case_info
+                description_title += '## Failed tests: %s \n' % ','.join(map(str, ids_failed_test))
             if not_executed_tests:
                 description_title += "## Not executed tests: %s\n" % ','.join([str(i) for i in not_executed_tests])
-            final_description = description_title + description
+            final_description = description_title + single_devices_block + ''.join([i for i in group_blocks.values()])
 
         request_body = {'description': final_description}
         return self.post('update_run/%s' % self.run_id, request_body)