Remove logger

index.js

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

src/quo2/components/list_items/menu_item.cljs

@@ -7,12 +7,14 @@
 (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)}))
+    :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)}))
 
 (defn menu-item
   [{:keys [type title accessibility-label icon on-press style-props subtitle subtitle-color]

src/status_im/chat/models.cljs

@@ -19,7 +19,8 @@
             [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]))
+            [taoensso.timbre :as log]
+            status-im2.common.bottom-sheet.view))
 
 (defn chats
   []
@@ -453,7 +454,7 @@
     :content             (i18n/label :t/clear-history-confirmation-content)
     :confirm-button-text (i18n/label :t/clear-history-action)
     :on-accept           #(do
-                            (re-frame/dispatch [:bottom-sheet/hide])
+                            (re-frame/dispatch-sync [:dismiss-bottom-sheet])
                             (re-frame/dispatch [:chat.ui/clear-history chat-id false]))}})
 
 (rf/defn gaps-failed
@@ -522,7 +523,7 @@
     :content             (i18n/label :t/delete-chat-confirmation)
     :confirm-button-text (i18n/label :t/delete)
     :on-accept           #(do
-                            (re-frame/dispatch [:bottom-sheet/hide])
+                            (re-frame/dispatch-sync [:dismiss-bottom-sheet])
                             (re-frame/dispatch [:chat.ui/remove-chat chat-id]))}})
 
 (rf/defn decrease-unviewed-count

src/status_im/events.cljs

@@ -58,7 +58,8 @@
    status-im.wallet.custom-tokens.core
    status-im2.contexts.activity-center.events
    status-im2.contexts.shell.events
-   [status-im2.navigation.events :as navigation]))
+   [status-im2.navigation.events :as navigation]
+   [react-native.background-timer :as timer]))
 
 (re-frame/reg-fx
  :dismiss-keyboard
@@ -324,3 +325,57 @@
     {::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

@@ -208,6 +208,11 @@
   [{: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/ui/screens/bottom_sheets/views.cljs

@@ -7,11 +7,17 @@
             [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]))
+            [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]))
 
 (defn bottom-sheet
   []
-  (let [{:keys [show? view options]} @(re-frame/subscribe [: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])
         {:keys [content]
          :as   opts}
         (cond-> {:visible? show?}
@@ -46,7 +52,22 @@
           (merge key-storage/migrate-account-password)
 
           (= view :pinned-messages-list)
-          (merge {:content pin.list/pinned-messages-list}))]
-    [bottom-sheet/bottom-sheet opts
-     (when content
-       [content (when options options)])]))
+          (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])))})))

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

@@ -1,19 +1,21 @@
 (ns status-im.ui.screens.home.sheet.views
-  (:require [quo.core :as quo]
+  (:require [i18n.i18n :as i18n]
+            [quo.core :as quo]
+            [quo2.core :as quo2]
             [quo2.foundations.colors :as colors]
-            [re-frame.core :as rf]
-            [i18n.i18n :as i18n]
+            [re-frame.core :as re-frame]
+            [react-native.background-timer :as timer]
             [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]
-            [quo2.core :as quo2]
-            [status-im.ui.screens.home.sheet.styles :as style]))
+            [utils.re-frame :as rf]))
 
-(defn hide-sheet-and-dispatch
+(defn- hide-sheet-and-dispatch
   [event]
-  (rf/dispatch [:bottom-sheet/hide])
+  (re-frame/dispatch-sync [:dismiss-bottom-sheet])
   (rf/dispatch event))
 
 (defn add-new-view
@@ -28,7 +30,7 @@
      {:type                :icon
       :theme               :icon
       :accessibility-label :universal-qr-scanner
-      :on-press            #(hide-sheet-and-dispatch
+      :on-press            #(rf/dispatch
                              [::qr-scanner/scan-code
                               {:handler ::qr-scanner/on-scan-success}])}
      :main-icons/qr]]
@@ -51,56 +53,59 @@
      :accessibility-label :join-public-chat-button
      :icon                :main-icons/public-chat
      :on-press            #(hide-sheet-and-dispatch [:open-modal :new-public-chat])}]
-   (when @(rf/subscribe [:communities/enabled?])
+   (when (rf/sub [:communities/enabled?])
      [quo/list-item
       {:theme               :accent
        :title               (i18n/label :t/communities-alpha)
        :accessibility-label :communities-button
        :icon                :main-icons/communities
-       :on-press            #(hide-sheet-and-dispatch [:navigate-to :communities])}])
+       :on-press            #(rf/dispatch [:navigate-to :communities])}])
    [invite/list-item
     {:accessibility-label :chats-menu-invite-friends-button}]])
 
 (defn new-chat-bottom-sheet
   []
-  [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                   (fn [] ;; Note: currently the bottom button is overlapping with
-                                        ;; safe-area
-                                        ;; because it is using old bottom-sheet
-                                   (rf/dispatch [:bottom-sheet/hide])
-                                   ;; A one second delay is needed because there are 2 bottom-sheets here
-                                   ;; It would better to migrate contact-selection-list component to use
-                                   ;; a screen
-                                   (js/setTimeout #(rf/dispatch [:bottom-sheet/show-sheet
-                                                                 {:content
-                                                                  new-chat-aio/contact-selection-list}])
-                                                  1000))
-    }]
-   [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])}]])
+  (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)))}]]))
 
 
 (def new-chat-bottom-sheet-comp

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

@@ -1,14 +1,19 @@
 (ns status-im.ui.screens.multiaccounts.sheets
   (:require [quo.core :as quo]
             [re-frame.core :as re-frame]
-            [i18n.i18n :as i18n]))
+            [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))
 
 (defn actions-sheet
   []
   [quo/list-item
    {:theme               :accent
-    :on-press            #(do (re-frame/dispatch [:bottom-sheet/hide])
-                              (re-frame/dispatch [:generate-and-derive-addresses]))
+    :on-press            #(hide-sheet-and-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,7 +10,6 @@
             [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]))
 
@@ -41,8 +40,7 @@
 
 (defn topbar-button
   []
-  (re-frame/dispatch [:bottom-sheet/show-sheet
-                      {:content sheets/actions-sheet}]))
+  (re-frame/dispatch [:bottom-sheet/show-sheet :generate-a-new-key {}]))
 
 (defview multiaccounts
   []

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

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

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

@@ -8,12 +8,19 @@
             [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-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))
 
 (defn- on-toggle
   [allow-new-users? checked? public-key]
@@ -39,80 +46,87 @@
      :size   :paragraph-1
      :style  {:margin-bottom 2
               :margin-top    20}}
-    "You have no contacts"]
+    (i18n/label :t/you-have-no-contacts)]
    [text/text
     {:weight :regular
      :size   :label
      :style  {:margin-bottom 20}}
-    "Invite your friends and family to Status"]
+    (i18n/label :t/invite-friends-and-family)]
    [quo2/button
     {:type     :primary
      :style    {:margin-bottom 12}
      :on-press #(rf/dispatch [::invite.events/share-link nil])}
-    "Invite friends"]
+    (i18n/label :t/invite-friends)]
    [quo2/button
     {:type     :grey
      :on-press #(hide-sheet-and-dispatch [:open-modal :new-contact])}
-    "Add a contact"]])
+    (i18n/label :t/add-a-contact)]])
 
 (defn contact-selection-list
   []
-  (let [contacts                                     (rf/sub
-                                                      [:contacts/grouped-by-first-letter])
-        selected-contacts-count                      (rf/sub [:selected-contacts-count])
-        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 {:flex 1}}
-     [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))]}])]))
+  [: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))]}])]))])

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

@@ -45,7 +45,8 @@
              :on-press            (fn []
                                     (rf/dispatch [:pin-message/hide-pin-limit-modal chat-id])
                                     (rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list
-                                                  chat-id]))
+                                                  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)]]]

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

@@ -9,10 +9,12 @@
   [quo/divider-label {:label title}])
 
 (defn contact-list
-  [data]
-  (let [contacts (if (:group data)
-                   (rf/sub [:contacts/grouped-by-first-letter])
-                   (rf/sub [:contacts/filtered-active-sections]))]
+  [{: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])))]
     [rn/section-list
      {:key-fn                         :title
       :sticky-section-headers-enabled false

src/status_im2/common/bottom_sheet/view.cljs

@@ -10,13 +10,11 @@
             [react-native.platform :as platform]
             [react-native.reanimated :as reanimated]
             [react-native.safe-area :as safe-area]
-            [reagent.core :as reagent]))
+            [utils.re-frame :as rf]))
 
 (def bottom-sheet-js (js/require "../src/js/bottom_sheet.js"))
 
-(def animation-delay 450)
-
-(defn with-animation
+(defn- with-animation
   [value & [options callback]]
   (reanimated/with-spring
    value
@@ -26,20 +24,6 @@
             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?
@@ -47,16 +31,16 @@
   (-> (gesture/gesture-pan)
       (gesture/on-start
        (fn [_]
-         (reset! gesture-running? true)
+         (rf/dispatch [:bottom-sheet/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
@@ -67,21 +51,21 @@
                                            max-pan-up))))))
       (gesture/on-end
        (fn [_]
-         (reset! gesture-running? false)
+         (rf/dispatch [:bottom-sheet/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))
-               (reset! expanded? true)
+               (and (not expanded?) (> end-pan-y expand-threshold))
+               (rf/dispatch [:bottom-sheet/did-expand true])
 
-               (and @expanded? (< end-pan-y collapse-threshold))
-               (reset! expanded? false))))))))
+               (and expanded? (< end-pan-y collapse-threshold))
+               (rf/dispatch [:bottom-sheet/did-expand false]))))))))
 
 (defn bottom-sheet
   [props children]
@@ -96,14 +80,7 @@
                             backdrop-dismiss? true
                             expandable?       false}}
         props
-        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))]
+        close-bottom-sheet #(re-frame/dispatch-sync [:dismiss-bottom-sheet on-cancel])]
     [safe-area/consumer
      (fn [insets]
        [:f>
@@ -114,7 +91,10 @@
                 window-height (if selected-item (- height 72) height)
                 {:keys [keyboard-shown]} (hooks/use-keyboard)
                 bg-height-expanded (- window-height (:top insets))
-                bg-height (max (min @content-height bg-height-expanded) 200)
+                {: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)
                 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)
@@ -122,7 +102,7 @@
                 (.useBackgroundOpacity ^js bottom-sheet-js translate-y bg-height window-height)
                 on-content-layout (fn [evt]
                                     (let [height (oget evt "nativeEvent" "layout" "height")]
-                                      (reset! content-height height)))
+                                      (rf/dispatch [:bottom-sheet/update-height height])))
                 on-expanded (fn []
                               (reanimated/set-shared-value bottom-sheet-dy bg-height-expanded)
                               (reanimated/set-shared-value pan-y 0))
@@ -145,30 +125,30 @@
             (react/effect! #(do
                               (cond
                                 (and
-                                 (nil? @show-bottom-sheet?)
+                                 (nil? show-bottom-sheet?)
                                  visible?
-                                 (some? @content-height)
-                                 (> @content-height 0))
-                                (reset! show-bottom-sheet? true)
+                                 (some? content-height)
+                                 (> content-height 0))
+                                (rf/dispatch [:bottom-sheet/show-quo2-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
-                                    (reset! keyboard-was-shown? true)
-                                    (reset! expanded? true))
-                                  (and @keyboard-was-shown? (not keyboard-shown))
-                                  (reset! expanded? false))))
-                           [@show-bottom-sheet? @keyboard-was-shown?])
+                                    (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?])
             (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
@@ -178,7 +158,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 animation-delay))
+                                      (timer/set-timeout on-expanded (or animation-delay 450)))
                                     (do
                                       (reanimated/set-shared-value
                                        bottom-sheet-dy
@@ -188,11 +168,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 animation-delay)))
+                                      (timer/set-timeout on-collapsed (or animation-delay 450))))
 
-                                  (= @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)}
@@ -218,8 +198,8 @@
                   [rn/view
                    {:style     (styles/content-style insets)
                     :on-layout (when-not (and
-                                          (some? @content-height)
-                                          (> @content-height 0))
+                                          (some? content-height)
+                                          (> content-height 0))
                                  on-content-layout)}
                    children]]
 

src/status_im2/common/confirmation_drawer/view.cljs

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

src/status_im2/common/contact_list_item/view.cljs

@@ -6,7 +6,8 @@
             [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]))
+            [reagent.core :as reagent]
+            [quo.react :as react]))
 
 (defn open-chat
   [chat-id]
@@ -25,28 +26,36 @@
         admin?                    (get admins current-pk)
         checked?                  (reagent/atom (if start-a-new-chat?
                                                   user-selected?
-                                                  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])))))}])]))
+                                                  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?]))])]))
 
 (defn contact-list-item
   [item _ _ {:keys [start-a-new-chat? on-toggle] :as extra-data}]

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

@@ -1,11 +1,14 @@
 (ns status-im2.common.home.actions.view
-  (: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]))
+  (: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]))
 
 (defn- entry
   [{:keys [icon label on-press danger? sub-label chevron? add-divider? accessibility-label]}]
@@ -25,8 +28,11 @@
 
 (defn hide-sheet-and-dispatch
   [event]
-  (rf/dispatch [:bottom-sheet/hide])
-  (rf/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))))
 
 (defn show-profile-action
   [chat-id]
@@ -43,11 +49,11 @@
 
 (defn mute-chat-action
   [chat-id]
-  (hide-sheet-and-dispatch [::chat.models/mute-chat-toggled chat-id true]))
+  (rf/dispatch [::chat.models/mute-chat-toggled chat-id true]))
 
 (defn unmute-chat-action
   [chat-id]
-  (hide-sheet-and-dispatch [::chat.models/mute-chat-toggled chat-id false]))
+  (rf/dispatch [::chat.models/mute-chat-toggled chat-id false]))
 
 (defn clear-history-action
   [{:keys [chat-id] :as item}]

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

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

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

@@ -9,7 +9,9 @@
             [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]))
+            [utils.re-frame :as rf]
+            [re-frame.core :as re-frame]
+            status-im2.common.bottom-sheet.view))
 
 (defn back-button
   []
@@ -76,7 +78,7 @@
            deselected-members      (rf/sub [:group-chat/deselected-members])]
        [rn/view {:style {:height (- window-height (:top safe-area))}}
         [rn/touchable-opacity
-         {:on-press            #(rf/dispatch [:bottom-sheet/hide])
+         {:on-press            #(re-frame/dispatch-sync [:dismiss-bottom-sheet])
           :accessibility-label :close-manage-members
           :style               (style/close-icon)}
          [quo2/icon :i/close {:color (colors/theme-colors colors/neutral-100 colors/white)}]]
@@ -97,7 +99,7 @@
                                   (rf/dispatch [:group-chats.ui/add-members-pressed])
                                   (js/setTimeout #(rf/dispatch [:group-chats.ui/remove-members-pressed])
                                                  500)
-                                  (rf/dispatch [:bottom-sheet/hide]))
+                                  (re-frame/dispatch-sync [:dismiss-bottom-sheet]))
            :disabled            (and (zero? (count selected-participants))
                                      (zero? (count deselected-members)))}
           (i18n/label :t/save)]]]))])
@@ -136,6 +138,7 @@
        {: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/content/pin/view.cljs

@@ -28,7 +28,9 @@
   (let [response-to  (:response-to (:content message))
         default-size 36]
     [rn/touchable-opacity
-     {:on-press       #(rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list chat-id])
+     {:on-press       (fn []
+                        (rf/dispatch [:dismiss-keyboard])
+                        (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,8 +2,7 @@
   (:require [status-im2.common.constants :as constants]
             [quo2.core :as quo]
             [react-native.core :as rn]
-            [utils.re-frame :as rf]
-            [status-im2.contexts.chat.messages.drawers.view :as drawers]))
+            [utils.re-frame :as rf]))
 
 (defn message-reactions-row
   [chat-id message-id]
@@ -27,5 +26,7 @@
                                                    :emoji-id   emoji-id}]))
             :accessibility-label (str "emoji-reaction-" emoji-id)}]])
        [quo/add-reaction
-        {:on-press #(rf/dispatch [:bottom-sheet/show-sheet
-                                  {:content (fn [] [drawers/reactions chat-id message-id])}])}]])))
+        {:on-press (fn []
+                     (rf/dispatch [:dismiss-keyboard])
+                     (rf/dispatch [:bottom-sheet/show-sheet :drawer/reactions
+                                   {:chat-id chat-id :message-id message-id}]))}]])))

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

@@ -69,8 +69,11 @@
      {:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90)
       :style          {:border-radius 16}
       :on-press       #()
-      :on-long-press  #(rf/dispatch [:bottom-sheet/show-sheet
-                                     {:content (drawers/reactions-and-actions message-data context)}])}
+      :on-long-press  (fn []
+                        (rf/dispatch [:dismiss-keyboard])
+                        (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/drawers/view.cljs

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

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

@@ -15,6 +15,8 @@
     [quo/banner
      {:latest-pin-text latest-pin-text
       :pins-count      pins-count
-      :on-press        #(rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list chat-id])}]))
+      :on-press        (fn []
+                         (rf/dispatch [:dismiss-keyboard])
+                         (rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list chat-id]))}]))
 
 

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

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

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

@@ -9,8 +9,9 @@
             [reagent.core :as reagent]
             [status-im2.contexts.chat.photo-selector.style :as style]
             [status-im.utils.core :as utils]
-            [quo.react]
-            [utils.re-frame :as rf]))
+            [utils.re-frame :as rf]
+            [re-frame.core :as re-frame]
+            status-im2.common.bottom-sheet.view))
 
 (def selected (reagent/atom []))
 
@@ -20,7 +21,7 @@
   (doseq [item @selected]
     (rf/dispatch [:chat.ui/camera-roll-pick item]))
   (reset! selected [])
-  (rf/dispatch [:bottom-sheet/hide]))
+  (re-frame/dispatch-sync [:dismiss-bottom-sheet]))
 
 (defn bottom-gradient
   [chat-id selected-images]
@@ -36,7 +37,9 @@
           [quo/button
            {:style               {:align-self        :stretch
                                   :margin-horizontal 20}
-            :on-press            #(on-press-confirm-selection chat-id)
+            :on-press            (fn []
+                                   (re-frame/dispatch-sync [:dismiss-bottom-sheet])
+                                   (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,11 +2,13 @@
   (:require [i18n.i18n :as i18n]
             [quo2.core :as quo]
             [react-native.core :as rn]
-            [utils.re-frame :as rf]))
+            [utils.re-frame :as rf]
+            [re-frame.core :as re-frame]
+            status-im2.common.bottom-sheet.view))
 
 (defn hide-sheet-and-dispatch
   [event]
-  (rf/dispatch [:bottom-sheet/hide])
+  (re-frame/dispatch-sync [:dismiss-bottom-sheet])
   (rf/dispatch event))
 
 (def not-joined-options
@@ -87,7 +89,7 @@
              :align-items     :center
              :justify-content :space-evenly}}
     [quo/button
-     {:on-press #(rf/dispatch [:bottom-sheet/hide])
+     {:on-press #(re-frame/dispatch-sync [:dismiss-bottom-sheet])
       :type     :grey
       :style    {:flex         1
                  :margin-right 12}}

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

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

src/status_im2/subs/contact.cljs

@@ -8,7 +8,8 @@
             [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]))
+            [utils.collection]
+            [status-im.constants :as constants]))
 
 (re-frame/reg-sub
  ::query-current-chat-contacts
@@ -102,6 +103,23 @@
        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

@@ -0,0 +1,183 @@
+(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,6 +198,22 @@
  (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,6 +37,7 @@
 (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)

translations/en.json

@@ -1492,7 +1492,7 @@
     "not-enough-snt": "Not enough SNT",
     "add-new-contact": "Add new contact",
     "add-a-contact": "Add a contact",
-    "enter-a-chat-key": "Enter a chat key or scan a QR",
+    "enter-a-chat-key": "Add a chatkey or scan a QR",
     "you-dont-have-contacts": "You don’t have any contacts yet.",
     "set-max": "Set max",
     "continue-anyway": "Continue anyway",
@@ -1937,5 +1937,8 @@
     "selected-count-from-max": "{{selected}}/{{max}}",
     "online": "Online",
     "contact-request-chat-pending": "Your contact request is pending",
-    "contact-request-chat-add": "Add {{name}} to send a message"
+    "contact-request-chat-add": "Add {{name}} to send a message",
+    "connect-with-users": "Connect with users",
+    "invite-friends-and-family": "Invite your friends and family to Status",
+    "you-have-no-contacts": "You have no contacts"
 }