WIP: fixing create profile screen

* "Rendered more hooks than during the previous render" error on closing group chat/communty channel

* Lint fix

ios/Podfile.lock

@@ -682,11 +682,11 @@ SPEC CHECKSUMS:
   boost: a7c83b31436843459a1961bfd74b96033dc77234
   BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
   CryptoSwift: c4f2debceb38bf44c80659afe009f71e23e4a082
-  DoubleConversion: cde416483dac037923206447da6e1454df403714
+  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
   FBLazyVector: d2db9d00883282819d03bbd401b2ad4360d47580
   FBReactNativeSpec: 94da4d84ba3b1acf459103320882daa481a2b62d
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 997518ea2aa2d8cd5df9797b641b758d52ecf2bc
+  glog: 9e3310013355e9221591364060e841c28041dfe3
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
   libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
@@ -763,4 +763,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: c29de3b14e3275299c51aa95520622f09d084bcb
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.12.0

modules/react-native-status/android/src/main/java/im/status/ethereum/pushnotifications/PushNotificationHelper.java

@@ -67,8 +67,8 @@ public class PushNotificationHelper {
     private static final long DEFAULT_VIBRATION = 300L;
     private static final String CHANNEL_ID = "status-im-notifications";
     public static final String ACTION_DELETE_NOTIFICATION = "im.status.ethereum.module.DELETE_NOTIFICATION";
-    public static final String ACTION_TAP_NOTIFICATION = "im.status.ethereum.module.TAP_NOTIFICATION";
     public static final String ACTION_TAP_STOP = "im.status.ethereum.module.TAP_STOP";
+    final int flag =  Build.VERSION.SDK_INT >= Build.VERSION_CODES.M ? PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE : PendingIntent.FLAG_CANCEL_CURRENT;
 
     private NotificationManager notificationManager;
 
@@ -119,13 +119,8 @@ public class PushNotificationHelper {
     private final BroadcastReceiver notificationActionReceiver = new BroadcastReceiver() {
             @Override
             public void onReceive(Context context, Intent intent) {
-                if (intent.getAction() == ACTION_TAP_NOTIFICATION ||
-                    intent.getAction() == ACTION_DELETE_NOTIFICATION) {
-                    String deepLink = intent.getExtras().getString("im.status.ethereum.deepLink");
+                if (intent.getAction() == ACTION_DELETE_NOTIFICATION) {
                     String groupId = intent.getExtras().getString("im.status.ethereum.groupId");
-                    if (intent.getAction() == ACTION_TAP_NOTIFICATION) {
-                        context.startActivity(getOpenAppIntent(deepLink));
-                    }
                     if (groupId != null) {
                         cleanGroup(groupId);
                     }
@@ -141,7 +136,6 @@ public class PushNotificationHelper {
     private void registerBroadcastReceiver() {
         IntentFilter filter = new IntentFilter();
         filter.addAction(ACTION_DELETE_NOTIFICATION);
-        filter.addAction(ACTION_TAP_NOTIFICATION);
         filter.addAction(ACTION_TAP_STOP);
         context.registerReceiver(notificationActionReceiver, filter);
         Log.e(LOG_TAG, "Broadcast Receiver registered");
@@ -701,37 +695,31 @@ public class PushNotificationHelper {
 
     private StatusMessage createMessage(Bundle data) {
         Person author = getPerson(data.getBundle("notificationAuthor"));
-        return new StatusMessage(data.getString("id"), author,  data.getLong("timestamp"), data.getString("message"));
+        long timeStampLongValue = (long) data.getDouble("timestamp");
+        return new StatusMessage(data.getString("id"), author, timeStampLongValue, data.getString("message"));
     }
 
     private PendingIntent createGroupOnDismissedIntent(Context context, int notificationId, String groupId, String deepLink) {
         Intent intent = new Intent(ACTION_DELETE_NOTIFICATION);
         intent.putExtra("im.status.ethereum.deepLink", deepLink);
         intent.putExtra("im.status.ethereum.groupId", groupId);
-        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent,
-                PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE);
+        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent, flag);
     }
 
     private PendingIntent createGroupOnTapIntent(Context context, int notificationId, String groupId, String deepLink) {
-        Intent intent = new Intent(ACTION_TAP_NOTIFICATION);
-        intent.putExtra("im.status.ethereum.deepLink", deepLink);
-        intent.putExtra("im.status.ethereum.groupId", groupId);
-        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent,
-                PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE);
+        Intent intent = getOpenAppIntent(deepLink);
+        return PendingIntent.getActivity(context.getApplicationContext(), notificationId, intent, flag);
    }
 
     private PendingIntent createOnTapIntent(Context context, int notificationId, String deepLink) {
-        Intent intent = new Intent(ACTION_TAP_NOTIFICATION);
-        intent.putExtra("im.status.ethereum.deepLink", deepLink);
-        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent,
-                PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE);
+        Intent intent = getOpenAppIntent(deepLink);
+        return PendingIntent.getActivity(context.getApplicationContext(), notificationId, intent, flag);
    }
 
     private PendingIntent createOnDismissedIntent(Context context, int notificationId, String deepLink) {
         Intent intent = new Intent(ACTION_DELETE_NOTIFICATION);
         intent.putExtra("im.status.ethereum.deepLink", deepLink);
-        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent,
-                PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE);
+        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent, flag);
     }
 
     public void removeStatusMessage(Bundle bundle) {

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

@@ -1,10 +1,11 @@
 (ns quo2.components.drawers.drawer-buttons.style
-  (:require [quo2.foundations.colors :as colors]
-            [react-native.platform :as platform]))
+  (:require [quo2.foundations.colors :as colors]))
 
 (def outer-container
-  {:height        216
-   :border-radius 20})
+  {:height                  216
+   :border-top-left-radius  20
+   :border-top-right-radius 20
+   :overflow                :hidden})
 
 (def top-card
   {:flex                    1
@@ -12,9 +13,7 @@
    :padding-horizontal      20
    :border-top-left-radius  20
    :border-top-right-radius 20
-   :background-color        (if platform/ios?
-                              colors/neutral-80-opa-80-blur
-                              colors/neutral-80)})
+   :background-color        colors/neutral-80-opa-80-blur})
 
 (def bottom-card
   {:position                :absolute
@@ -33,11 +32,11 @@
    :justify-content :space-between})
 
 (def bottom-icon
-  {:border-radius   40
+  {:border-radius   32
    :border-width    1
    :margin-left     24
-   :height          28
-   :width           28
+   :height          32
+   :width           32
    :justify-content :center
    :align-items     :center
    :border-color    colors/white-opa-5})
@@ -52,4 +51,4 @@
 (defn heading-text
   [gap]
   {:color         colors/white
-   :margin-bottom gap})
+   :margin-bottom gap})

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

@@ -71,14 +71,28 @@
     child-2           string, keyword or hiccup
    "
   [{:keys [container-style top-card bottom-card]} child-1 child-2]
-  [blur/ios-view
+  [rn/view
    {:style (merge container-style style/outer-container)}
-   [card
-    (merge {:gap   4
-            :top?  true
-            :style style/top-card}
-           top-card) child-1]
-   [card
-    (merge {:style style/bottom-card
-            :gap   20}
-           bottom-card) child-2]])
+   [blur/view
+    {:blur-type   :dark
+     :blur-amount 10
+     :style       {:flex                    1
+                   :border-top-left-radius  20
+                   :border-top-right-radius 20}}]
+   [rn/view
+    {:style {:flex             1
+             :background-color :transparent
+             :position         :absolute
+             :top              0
+             :left             0
+             :right            0
+             :bottom           0}}
+    [card
+     (merge {:gap   4
+             :top?  true
+             :style style/top-card}
+            top-card) child-1]
+    [card
+     (merge {:style style/bottom-card
+             :gap   20}
+            bottom-card) child-2]]])

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

@@ -0,0 +1,30 @@
+(ns quo2.components.empty-state.empty-state.styles
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container
+  {:padding     12
+   :align-items :center})
+
+(def image
+  {:width  80
+   :height 80})
+
+(def text-container
+  {:margin-top  12
+   :align-items :center})
+
+(defn title
+  [blur?]
+  (cond-> {:margin-bottom 2}
+    blur? (assoc :color colors/white)))
+
+(defn description
+  [blur?]
+  (when blur?
+    {:color colors/white}))
+
+(def button-container {:margin-top 20})
+
+(defn upper-button-color
+  [customization-color]
+  (colors/custom-color-by-theme customization-color 50 60))

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

@@ -0,0 +1,50 @@
+(ns quo2.components.empty-state.empty-state.view
+  (:require [quo2.components.buttons.button :as button]
+            [quo2.components.empty-state.empty-state.styles :as styles]
+            [quo2.components.markdown.text :as text]
+            [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]))
+
+(defn empty-state
+  [{:keys        [customization-color image title description blur?]
+    upper-button :upper-button
+    lower-button :lower-button
+    :or          {customization-color :blue}}]
+  [rn/view {:style styles/container}
+   [fast-image/fast-image
+    {:style  styles/image
+     :source image}]
+   [rn/view {:style styles/text-container}
+    [text/text
+     {:style           (styles/title blur?)
+      :number-of-lines 1
+      :weight          :semi-bold
+      :size            :paragraph-1}
+     title]
+    [text/text
+     {:style           (styles/description blur?)
+      :number-of-lines 1
+      :text-align      :center
+      :weight          :regular
+      :size            :paragraph-2}
+     description]]
+   (when-let [{upper-button-text     :text
+               upper-button-on-press :on-press} upper-button]
+     [rn/view {:style styles/button-container}
+      [button/button
+       (cond-> {:type                      :primary
+                :size                      32
+                :override-background-color (styles/upper-button-color customization-color)
+                :on-press                  upper-button-on-press}
+         blur? (assoc :override-theme :dark))
+       upper-button-text]
+
+      (when-let [{lower-button-text     :text
+                  lower-button-on-press :on-press} lower-button]
+        [button/button
+         (cond-> {:style    {:margin-top 12}
+                  :size     32
+                  :type     :blur-bg
+                  :on-press lower-button-on-press}
+           blur? (assoc :override-theme :dark))
+         lower-button-text])])])

src/quo2/components/info/info_message.cljs

@@ -22,27 +22,26 @@
   opts
   {:type           :default/:success/:error
    :size           :default/:tiny
-   :icon           :i/info ;; info message icon
-   :text-color     colors/white     ;; text color override
-   :icon-color     colors/white    ;; icon color override
-   :no-icon-color? false       ;; disable tint color for icon"
+   :icon           :i/info       ;; info message icon
+   :text-color     colors/white  ;; text color override
+   :icon-color     colors/white  ;; icon color override
+   :no-icon-color? false         ;; disable tint color for icon"
   [{:keys [type size icon text-color icon-color no-icon-color? style]} message]
-  (let [weight          (if (= size :default) :regular :medium)
-        icon-size       (if (= size :default) 16 12)
-        icon-margin-top (if (= size :default) 2 3)
-        size            (if (= size :default) :paragraph-2 :label)
-        text-color      (or text-color (get-color type))
-        icon-color      (or icon-color text-color)]
+  (let [weight     (if (= size :default) :regular :medium)
+        icon-size  (if (= size :default) 16 12)
+        size       (if (= size :default) :paragraph-2 :label)
+        text-color (or text-color (get-color type))
+        icon-color (or icon-color text-color)]
     [rn/view
-     {:style (merge {:flex-direction :row}
+     {:style (merge {:flex-direction :row
+                     :align-items    :center}
                     style)}
      [quo2.icons/icon icon
-      {:color           icon-color
-       :no-color        no-icon-color?
-       :size            icon-size
-       :container-style {:margin-top icon-margin-top}}]
+      {:color    icon-color
+       :no-color no-icon-color?
+       :size     icon-size}]
      [text/text
       {:size   size
        :weight weight
        :style  {:color             text-color
-                :margin-horizontal 8}} message]]))
+                :margin-horizontal 4}} message]]))

src/quo2/components/inputs/title_input/view.cljs

@@ -15,13 +15,15 @@
 (defn title-input
   [{:keys [blur?
            on-change-text
+           auto-focus
            placeholder
            max-length
            default-value
            override-theme]
     :or   {max-length    0
+           auto-focus    false
            default-value ""}}]
-  (let [focused?  (reagent/atom false)
+  (let [focused?  (reagent/atom auto-focus)
         value     (reagent/atom default-value)
         on-change (fn [v]
                     (reset! value v)
@@ -42,6 +44,7 @@
           :keyboard-appearance (theme/theme-value :light :dark override-theme)
           :on-focus #(swap! focused? (fn [] true))
           :on-blur #(swap! focused? (fn [] false))
+          :auto-focus auto-focus
           :input-mode :text
           :on-change-text on-change
           :editable (not disabled?)

src/quo2/components/reactions/reaction.cljs

@@ -1,6 +1,7 @@
 (ns quo2.components.reactions.reaction
   (:require [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
+            [quo2.components.reactions.resource :as resource]
             [quo2.components.reactions.style :as style]
             [quo2.foundations.colors :as colors]
             [quo2.theme :as theme]
@@ -28,9 +29,10 @@
       :on-long-press       on-long-press
       :accessibility-label accessibility-label
       :style               (style/reaction neutral?)}
-     [icons/icon emoji
-      {:no-color true
-       :size     16}]
+     [rn/image
+      {:style               {:width 16 :height 16}
+       :accessibility-label :emoji
+       :source              (resource/get-reaction emoji)}]
      [text/text
       {:size            :paragraph-2
        :weight          :semi-bold

src/quo2/components/reactions/resource.clj

@@ -0,0 +1,30 @@
+(ns quo2.components.reactions.resource
+  (:require [clojure.java.io :as io]
+            [clojure.string :as string]))
+
+(def ^:private reactions-dir "./resources/images/reactions/")
+
+(defn- resolve-reaction
+  [reaction]
+  (let [path (str reactions-dir (name reaction) ".png")
+        file (io/file path)]
+    (when (.exists file)
+      `(js/require ~(str "." path)))))
+
+(defn- find-all-image-base-names
+  []
+  (let [dir (io/file reactions-dir)]
+    (->> dir
+         file-seq
+         (filter #(string/ends-with? % "png"))
+         (map #(.getName %))
+         (map #(string/replace % #"\.png$" ""))
+         (map #(first (string/split % #"@")))
+         distinct)))
+
+(defmacro resolve-all-reactions
+  []
+  (reduce (fn [acc reaction]
+            (assoc acc reaction (resolve-reaction reaction)))
+          {}
+          (find-all-image-base-names)))

src/quo2/components/reactions/resource.cljs

@@ -0,0 +1,12 @@
+(ns quo2.components.reactions.resource
+  (:require-macros [quo2.components.reactions.resource :refer [resolve-all-reactions]]))
+
+(def ^:private reactions
+  (resolve-all-reactions))
+
+(defn get-reaction
+  [reaction]
+  (assert (keyword? reaction) "Reaction should be a keyword")
+  (assert (= "reaction" (namespace reaction))
+          "Reaction keyword should be namespaced with :reaction")
+  (get reactions (name reaction)))

src/quo2/components/selectors/reactions/component_spec.cljs

@@ -0,0 +1,23 @@
+(ns quo2.components.selectors.reactions.component-spec
+  (:require [quo2.components.selectors.reactions.view :as view]
+            [test-helpers.component :as h]))
+
+(h/describe "Selectors > Reactions"
+  (h/test "renders component"
+    (h/render [view/view :reaction/sad])
+    (h/is-truthy (h/get-by-label-text :reaction)))
+
+  (h/describe "on-press event"
+    (h/test "starts with released state"
+      (let [on-press (h/mock-fn)]
+        (h/render [view/view :reaction/love {:on-press on-press}])
+        (h/fire-event :press (h/get-by-label-text :reaction))
+        (h/was-called on-press)))
+
+    (h/test "starts with pressed state"
+      (let [on-press (h/mock-fn)]
+        (h/render [view/view :reaction/love
+                   {:on-press       on-press
+                    :start-pressed? true}])
+        (h/fire-event :press (h/get-by-label-text :reaction))
+        (h/was-called on-press)))))

src/quo2/components/selectors/reactions/style.cljs

@@ -0,0 +1,11 @@
+(ns quo2.components.selectors.reactions.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn container
+  [pressed?]
+  {:padding          10
+   :border-radius    12
+   :border-width     1
+   :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-80)
+   :background-color (when pressed?
+                       (colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40))})

src/quo2/components/selectors/reactions/view.cljs

@@ -0,0 +1,25 @@
+(ns quo2.components.selectors.reactions.view
+  (:require [quo2.components.reactions.resource :as reactions.resource]
+            [quo2.components.selectors.reactions.style :as style]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]))
+
+(defn view
+  [_ {:keys [start-pressed?]}]
+  (let [pressed? (reagent/atom start-pressed?)]
+    (fn [emoji
+         {:keys [container-style on-press
+                 accessibility-label]
+          :or   {accessibility-label :reaction}}]
+      [rn/touchable-without-feedback
+       {:accessibility-label accessibility-label
+        :on-press            (fn [e]
+                               (swap! pressed? not)
+                               (when on-press
+                                 (on-press e)))}
+       [rn/view
+        {:style (merge (style/container @pressed?)
+                       container-style)}
+        [rn/image
+         {:source (reactions.resource/get-reaction emoji)
+          :style  {:width 20 :height 20}}]]])))

src/quo2/core.cljs

@@ -30,6 +30,7 @@
     quo2.components.drawers.permission-context.view
     quo2.components.dropdowns.dropdown
     quo2.components.header
+    quo2.components.empty-state.empty-state.view
     quo2.components.icon
     quo2.components.info.info-message
     quo2.components.info.information-box
@@ -64,6 +65,7 @@
     quo2.components.profile.profile-card.view
     quo2.components.profile.select-profile.view
     quo2.components.reactions.reaction
+    quo2.components.selectors.reactions.view
     quo2.components.record-audio.record-audio.view
     quo2.components.record-audio.soundtrack.view
     quo2.components.selectors.disclaimer.view
@@ -110,6 +112,9 @@
 (def skeleton quo2.components.loaders.skeleton/skeleton)
 (def author quo2.components.messages.author.view/author)
 
+;;;; SELECTORS
+(def reactions quo2.components.selectors.reactions.view/view)
+
 ;;;; AVATAR
 (def account-avatar quo2.components.avatars.account-avatar/account-avatar)
 (def channel-avatar quo2.components.avatars.channel-avatar/channel-avatar)
@@ -164,6 +169,9 @@
 (def drawer-buttons quo2.components.drawers.drawer-buttons.view/view)
 (def permission-context quo2.components.drawers.permission-context.view/view)
 
+;;;; EMPTY STATE
+(def empty-state quo2.components.empty-state.empty-state.view/empty-state)
+
 ;;;; INPUTS
 (def input quo2.components.inputs.input.view/input)
 (def profile-input quo2.components.inputs.profile-input.view/profile-input)

src/quo2/core_spec.cljs

@@ -14,13 +14,13 @@
     [quo2.components.drawers.drawer-buttons.component-spec]
     [quo2.components.drawers.permission-context.component-spec]
     [quo2.components.inputs.input.component-spec]
-    [quo2.components.keycard.component-spec]
     [quo2.components.inputs.profile-input.component-spec]
     [quo2.components.inputs.recovery-phrase.component-spec]
     [quo2.components.inputs.title-input.component-spec]
+    [quo2.components.keycard.component-spec]
+    [quo2.components.links.link-preview.component-spec]
     [quo2.components.links.url-preview-list.component-spec]
     [quo2.components.links.url-preview.component-spec]
-    [quo2.components.links.link-preview.component-spec]
     [quo2.components.markdown.--tests--.text-component-spec]
     [quo2.components.notifications.notification.component-spec]
     [quo2.components.onboarding.small-option-card.component-spec]
@@ -30,6 +30,7 @@
     [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec]
     [quo2.components.selectors.disclaimer.component-spec]
     [quo2.components.selectors.filter.component-spec]
+    [quo2.components.selectors.reactions.component-spec]
     [quo2.components.selectors.selectors.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
     [quo2.components.tags.--tests--.status-tags-component-spec]))

src/status_im/chat/models/loading.cljs

@@ -103,7 +103,7 @@
 (rf/defn messages-loaded
   "Loads more messages for current chat"
   {:events [::messages-loaded]}
-  [{db :db} chat-id session-id {:keys [cursor messages]}]
+  [{db :db} chat-id session-id {:keys [cursor messages]} on-loaded]
   (when-not (and (get-in db [:pagination-info chat-id :messages-initialized?])
                  (not= session-id
                        (get-in db [:pagination-info chat-id :messages-initialized?])))
@@ -141,6 +141,8 @@
                                       [:pagination-info chat-id
                                        :cursor-clock-value])
           clock-value (when cursor (cursor->clock-value cursor))]
+      (when on-loaded
+        (on-loaded (count new-messages)))
       {:db (-> db
                (update-in [:pagination-info chat-id :cursor-clock-value]
                           #(if (and (seq cursor) (or (not %) (< clock-value %)))
@@ -161,7 +163,7 @@
 
 (rf/defn load-more-messages
   {:events [:chat.ui/load-more-messages]}
-  [{:keys [db]} chat-id first-request]
+  [{:keys [db]} chat-id first-request on-loaded]
   (when-let [session-id (get-in db [:pagination-info chat-id :messages-initialized?])]
     (when (and
            (not (get-in db [:pagination-info chat-id :all-loaded?]))
@@ -175,13 +177,13 @@
             chat-id
             cursor
             constants/default-number-of-messages
-            #(re-frame/dispatch [::messages-loaded chat-id session-id %])
+            #(re-frame/dispatch [::messages-loaded chat-id session-id % on-loaded])
             #(re-frame/dispatch [::failed-loading-messages chat-id session-id %]))))))))
 
 (rf/defn load-more-messages-for-current-chat
   {:events [:chat.ui/load-more-messages-for-current-chat]}
-  [{:keys [db] :as cofx}]
-  (load-more-messages cofx (:current-chat-id db) false))
+  [{:keys [db] :as cofx} on-loaded]
+  (load-more-messages cofx (:current-chat-id db) false on-loaded))
 
 (rf/defn load-messages
   [{:keys [db now] :as cofx} chat-id]
@@ -191,4 +193,4 @@
                :utils/dispatch-later [{:ms 50 :dispatch [:chat.ui/mark-all-read-pressed chat-id]}
                                       (when-not (get-in cofx [:db :chats chat-id :public?])
                                         {:ms 100 :dispatch [:pin-message/load-pin-messages chat-id]})]}
-              (load-more-messages chat-id true))))
+              (load-more-messages chat-id true nil))))

src/status_im/signals/core.cljs

@@ -10,8 +10,7 @@
             [utils.re-frame :as rf]
             [status-im2.contexts.chat.messages.link-preview.events :as link-preview]
             [taoensso.timbre :as log]
-            [status-im2.constants :as constants]
-            [quo2.foundations.colors :as colors]))
+            [status-im2.constants :as constants]))
 
 (rf/defn status-node-started
   [{db :db :as cofx} {:keys [error]}]
@@ -56,7 +55,7 @@
                 :peers-count (count (:peers peer-stats)))}))
 
 (rf/defn handle-local-pairing-signals
-  [{:keys [db] :as cofx} {:keys [type action data error] :as event}]
+  [{:keys [db] :as cofx} {:keys [type action data] :as event}]
   (log/info "local pairing signal received"
             {:event event})
   (let [{:keys [account password]}      data
@@ -79,7 +78,7 @@
                                              (and (some? account) (some? password)))
         multiaccount-data               (when received-account?
                                           (merge account {:password password}))
-        navigate-to-syncing-devices?    (and (or connection-success? error-on-pairing?) receiver?)
+        navigate-to-syncing-devices?    (and connection-success? receiver?)
         user-in-syncing-devices-screen? (= (:view-id db) :syncing-progress)]
     (merge {:db (cond-> db
                   connection-success?
@@ -93,21 +92,12 @@
 
                   completed-pairing?
                   (assoc-in [:syncing :pairing-status] :completed))}
-           (cond
-             (and navigate-to-syncing-devices? (not user-in-syncing-devices-screen?))
-             {:dispatch [:navigate-to :syncing-progress]}
-
-             (and completed-pairing? sender?)
-             {:dispatch [:syncing/clear-states]}
-
-             (and completed-pairing? receiver?)
-             {:dispatch [:multiaccounts.login/local-paired-user]}
-
-             error-on-pairing?
-             {:dispatch [:toasts/upsert
-                         {:icon       :i/alert
-                          :icon-color colors/danger-50
-                          :text       error}]}))))
+           (when (and navigate-to-syncing-devices? (not user-in-syncing-devices-screen?))
+             {:dispatch [:navigate-to :syncing-progress]})
+           (when (and completed-pairing? sender?)
+             {:dispatch [:syncing/clear-states]})
+           (when (and completed-pairing? receiver?)
+             {:dispatch [:multiaccounts.login/local-paired-user]}))))
 
 (rf/defn process
   {:events [:signals/signal-received]}

src/status_im2/common/resources.cljs

@@ -23,7 +23,9 @@
    :discover                      (js/require "../resources/images/ui2/discover.png")
    :invite-friends                (js/require "../resources/images/ui2/invite-friends.png")
    :no-contacts-light             (js/require "../resources/images/ui2/no-contacts-light.png")
-   :no-contacts-dark              (js/require "../resources/images/ui2/no-contacts-dark.png")})
+   :no-contacts-dark              (js/require "../resources/images/ui2/no-contacts-dark.png")
+   :no-messages-light             (js/require "../resources/images/ui2/no-messages-light.png")
+   :no-messages-dark              (js/require "../resources/images/ui2/no-messages-dark.png")})
 
 (def mock-images
   {:coinbase             (js/require "../resources/images/mock2/coinbase.png")

src/status_im2/constants.cljs

@@ -71,12 +71,12 @@
 (def request-to-join-pending-state 1)
 
 (def reactions
-  {emoji-reaction-love        :i/love
-   emoji-reaction-thumbs-up   :i/thumbs-up
-   emoji-reaction-thumbs-down :i/thumbs-down
-   emoji-reaction-laugh       :i/laugh
-   emoji-reaction-sad         :i/sad
-   emoji-reaction-angry       :i/angry})
+  {emoji-reaction-love        :reaction/love
+   emoji-reaction-thumbs-up   :reaction/thumbs-up
+   emoji-reaction-thumbs-down :reaction/thumbs-down
+   emoji-reaction-laugh       :reaction/laugh
+   emoji-reaction-sad         :reaction/sad
+   emoji-reaction-angry       :reaction/angry})
 
 (def ^:const invitation-state-unknown 0)
 (def ^:const invitation-state-requested 1)

src/status_im2/contexts/chat/lightbox/utils.cljs

@@ -15,24 +15,37 @@
     [status-im2.contexts.chat.lightbox.constants :as constants]
     [utils.worklets.lightbox :as worklet]))
 
+(defn clear-timers
+  [timers]
+  (js/clearTimeout (:mount-animation @timers))
+  (js/clearTimeout (:mount-index-lock @timers))
+  (js/clearTimeout (:hide-0 @timers))
+  (js/clearTimeout (:hide-1 @timers))
+  (js/clearTimeout (:show-0 @timers))
+  (js/clearTimeout (:show-1 @timers))
+  (js/clearTimeout (:show-2 @timers)))
 
 (defn effect
-  [{:keys [flat-list-ref scroll-index-lock?]} {:keys [opacity layout border]} index]
-  (rn/use-effect (fn []
-                   (reagent/next-tick (fn []
-                                        (when @flat-list-ref
-                                          (.scrollToIndex ^js @flat-list-ref
-                                                          #js {:animated false :index index}))))
-                   (js/setTimeout (fn []
-                                    (anim/animate opacity 1)
-                                    (anim/animate layout 0)
-                                    (anim/animate border 12))
-                                  (if platform/ios? 250 100))
-                   (js/setTimeout #(reset! scroll-index-lock? false) 300)
-                   (fn []
-                     (rf/dispatch [:chat.ui/zoom-out-signal nil])
-                     (when platform/android?
-                       (rf/dispatch [:chat.ui/lightbox-scale 1]))))))
+  [{:keys [flat-list-ref scroll-index-lock? timers]} {:keys [opacity layout border]} index]
+  (rn/use-effect
+   (fn []
+     (reagent/next-tick (fn []
+                          (when @flat-list-ref
+                            (.scrollToIndex ^js @flat-list-ref
+                                            #js {:animated false :index index}))))
+     (swap! timers assoc
+       :mount-animation
+       (js/setTimeout (fn []
+                        (anim/animate opacity 1)
+                        (anim/animate layout 0)
+                        (anim/animate border 12))
+                      (if platform/ios? 250 100)))
+     (swap! timers assoc :mount-index-lock (js/setTimeout #(reset! scroll-index-lock? false) 300))
+     (fn []
+       (rf/dispatch [:chat.ui/zoom-out-signal nil])
+       (when platform/android?
+         (rf/dispatch [:chat.ui/lightbox-scale 1]))
+       (clear-timers timers)))))
 
 (defn handle-orientation
   [result {:keys [flat-list-ref]} {:keys [scroll-index]} animations]
@@ -102,7 +115,7 @@
                           (anim/animate opacity 0)
                           (rf/dispatch [:navigate-back]))
                         (do
-                          #(reset! set-full-height? true)
+                          (reset! set-full-height? true)
                           (anim/animate (if x? pan-x pan-y) 0)
                           (anim/animate opacity 1)
                           (anim/animate layout 0)))))))
@@ -111,7 +124,8 @@
   []
   {:flat-list-ref      (atom nil)
    :small-list-ref     (atom nil)
-   :scroll-index-lock? (atom true)})
+   :scroll-index-lock? (atom true)
+   :timers             (atom {})})
 
 (defn init-state
   [messages index]

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

@@ -88,7 +88,8 @@
                                              :screen-width     screen-width
                                              :window-height    window-height
                                              :window-width     window-width
-                                             :props            props}
+                                             :props            props
+                                             :curr-orientation curr-orientation}
          :horizontal                        horizontal?
          :inverted                          inverted?
          :paging-enabled                    true
@@ -113,7 +114,8 @@
                          (on-viewable-items-changed e props state))]
         (anim/animate (:background-color animations) "rgba(0,0,0,1)")
         (reset! (:data state) messages)
-        (utils/orientation-change props state animations)
+        (when platform/ios? ; issue: https://github.com/wix/react-native-navigation/issues/7726
+          (utils/orientation-change props state animations))
         (utils/effect props animations index)
         [:f> lightbox-content props state animations derived messages index callback]))))
 

src/status_im2/contexts/chat/lightbox/zoomable_image/utils.cljs

@@ -107,23 +107,34 @@
 
 (defn toggle-opacity
   [index {:keys [opacity-value border-value transparent? props]} portrait?]
-  (let [{:keys [small-list-ref]} props
-        opacity                  (reanimated/get-shared-value opacity-value)]
+  (let [{:keys [small-list-ref timers]} props
+        opacity                         (reanimated/get-shared-value opacity-value)]
     (if (= opacity 1)
       (do
-        (when platform/ios?
-          ;; status-bar issue: https://github.com/status-im/status-mobile/issues/15343
-          (js/setTimeout #(navigation/merge-options "lightbox" {:statusBar {:visible false}}) 75))
+        (js/clearTimeout (:show-0 @timers))
+        (js/clearTimeout (:show-1 @timers))
+        (js/clearTimeout (:show-2 @timers))
+        (swap! timers assoc
+          :hide-0
+          (js/setTimeout #(navigation/merge-options "lightbox" {:statusBar {:visible false}})
+                         (if platform/ios? 75 0)))
         (anim/animate opacity-value 0)
-        (js/setTimeout #(reset! transparent? (not @transparent?)) 400))
+        (swap! timers assoc :hide-1 (js/setTimeout #(reset! transparent? (not @transparent?)) 400)))
       (do
+        (js/clearTimeout (:hide-0 @timers))
+        (js/clearTimeout (:hide-1 @timers))
         (reset! transparent? (not @transparent?))
-        (js/setTimeout #(anim/animate opacity-value 1) 50)
-        (js/setTimeout #(when @small-list-ref
-                          (.scrollToIndex ^js @small-list-ref #js {:animated false :index index}))
-                       100)
-        (when (and platform/ios? portrait?)
-          (js/setTimeout #(navigation/merge-options "lightbox" {:statusBar {:visible true}}) 150))))
+        (swap! timers assoc :show-0 (js/setTimeout #(anim/animate opacity-value 1) 50))
+        (swap! timers assoc
+          :show-1
+          (js/setTimeout #(when @small-list-ref
+                            (.scrollToIndex ^js @small-list-ref #js {:animated false :index index}))
+                         100))
+        (when portrait?
+          (swap! timers assoc
+            :show-2
+            (js/setTimeout #(navigation/merge-options "lightbox" {:statusBar {:visible true}})
+                           (if platform/ios? 150 50))))))
     (anim/animate border-value (if (= opacity 1) 0 12))))
 
 ;;; Dimensions

src/status_im2/contexts/chat/lightbox/zoomable_image/view.cljs

@@ -228,36 +228,35 @@
         :style     (style/image dimensions animations (:border-value render-data))}]]]))
 
 (defn zoomable-image
-  [{:keys [image-width image-height content message-id]} index render-data]
-  (let [state                      (utils/init-state)
-        shared-element-id          (rf/sub [:shared-element-id])
-        exit-lightbox-signal       (rf/sub [:lightbox/exit-signal])
-        zoom-out-signal            (rf/sub [:lightbox/zoom-out-signal])
-        curr-orientation           (or (rf/sub [:lightbox/orientation])
-                                       orientation/portrait)
-        {:keys [set-full-height?]} render-data
-        focused?                   (= shared-element-id message-id)
-        dimensions                 (utils/get-dimensions
-                                    (or image-width c/default-dimension)
-                                    (or image-height c/default-duration)
-                                    curr-orientation
-                                    render-data)
-        animations                 (utils/init-animations)
-        rescale                    (fn [value exit?]
-                                     (utils/rescale-image value
-                                                          exit?
-                                                          dimensions
-                                                          animations
-                                                          state))]
-    (rn/use-effect (fn []
-                     (js/setTimeout #(reset! set-full-height? true) 500)))
-    (when platform/ios?
-      (utils/handle-orientation-change curr-orientation focused? dimensions animations state)
-      (utils/handle-exit-lightbox-signal exit-lightbox-signal
-                                         index
-                                         (anim/get-val (:scale animations))
-                                         rescale
-                                         set-full-height?))
-    (utils/handle-zoom-out-signal zoom-out-signal index (anim/get-val (:scale animations)) rescale)
-    [:f> f-zoomable-image dimensions animations state rescale curr-orientation content focused?
-     index render-data]))
+  []
+  (let [state (utils/init-state)]
+    (fn [{:keys [image-width image-height content message-id]} index render-data]
+      (let [shared-element-id                           (rf/sub [:shared-element-id])
+            exit-lightbox-signal                        (rf/sub [:lightbox/exit-signal])
+            zoom-out-signal                             (rf/sub [:lightbox/zoom-out-signal])
+            {:keys [set-full-height? curr-orientation]} render-data
+            focused?                                    (= shared-element-id message-id)
+            dimensions                                  (utils/get-dimensions
+                                                         (or image-width c/default-dimension)
+                                                         (or image-height c/default-duration)
+                                                         curr-orientation
+                                                         render-data)
+            animations                                  (utils/init-animations)
+            rescale                                     (fn [value exit?]
+                                                          (utils/rescale-image value
+                                                                               exit?
+                                                                               dimensions
+                                                                               animations
+                                                                               state))]
+        (rn/use-effect (fn []
+                         (js/setTimeout (fn [] (reset! set-full-height? true)) 500)))
+        (when platform/ios?
+          (utils/handle-orientation-change curr-orientation focused? dimensions animations state)
+          (utils/handle-exit-lightbox-signal exit-lightbox-signal
+                                             index
+                                             (anim/get-val (:scale animations))
+                                             rescale
+                                             set-full-height?))
+        (utils/handle-zoom-out-signal zoom-out-signal index (anim/get-val (:scale animations)) rescale)
+        [:f> f-zoomable-image dimensions animations state rescale curr-orientation content focused?
+         index render-data]))))

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

@@ -85,7 +85,7 @@
   (let [show-delivery-state? (reagent/atom false)]
     (fn [{:keys [content-type quoted-message content outgoing outgoing-status] :as message-data}
          context
-         keyboard-shown
+         keyboard-shown?
          message-reaction-view?]
       (let [first-image     (first (:album message-data))
             outgoing-status (if (= content-type constants/content-type-album)
@@ -105,7 +105,7 @@
           :style               {:border-radius 16
                                 :opacity       (if (and outgoing (= outgoing-status :sending)) 0.5 1)}
           :on-press            (fn []
-                                 (if (and platform/ios? @keyboard-shown)
+                                 (if (and platform/ios? keyboard-shown?)
                                    (rn/dismiss-keyboard!)
                                    (when (and outgoing
                                               (not= outgoing-status :sending)

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

@@ -3,7 +3,6 @@
             [react-native.core :as rn]
             [status-im.ui.components.react :as react]
             [status-im2.contexts.chat.composer.reply.view :as reply]
-            [status-im2.common.not-implemented :as not-implemented]
             [status-im2.constants :as constants]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]
@@ -175,29 +174,23 @@
               :padding-horizontal 30
               :padding-top        5
               :padding-bottom     15}}
-     (doall
-      (for [[id icon] constants/reactions]
-        (let [emoji-reaction-id (get own-reactions id)]
-          ^{:key id}
-          [not-implemented/not-implemented
-           [quo/button
-            (merge
-             {:size                40
-              :type                (if emoji-reaction-id :grey :ghost)
-              :icon                true
-              :icon-no-color       true
-              :accessibility-label (str "emoji-picker-" id)
-              :on-press            (fn []
-                                     (if emoji-reaction-id
-                                       (rf/dispatch [:models.reactions/send-emoji-reaction-retraction
-                                                     {:message-id        message-id
-                                                      :emoji-id          id
-                                                      :emoji-reaction-id emoji-reaction-id}])
-                                       (rf/dispatch [:models.reactions/send-emoji-reaction
-                                                     {:message-id message-id
-                                                      :emoji-id   id}]))
-                                     (rf/dispatch [:hide-bottom-sheet]))})
-            icon]])))]))
+     (for [[id reaction-name] constants/reactions
+           :let               [emoji-reaction-id (get own-reactions id)]]
+       ^{:key id}
+       [quo/reactions reaction-name
+        {:start-pressed? (boolean emoji-reaction-id)
+         :accessibility-label (str "reaction-" (name reaction-name))
+         :on-press
+         (fn []
+           (if emoji-reaction-id
+             (rf/dispatch [:models.reactions/send-emoji-reaction-retraction
+                           {:message-id        message-id
+                            :emoji-id          id
+                            :emoji-reaction-id emoji-reaction-id}])
+             (rf/dispatch [:models.reactions/send-emoji-reaction
+                           {:message-id message-id
+                            :emoji-id   id}]))
+           (rf/dispatch [:hide-bottom-sheet]))}])]))
 
 (defn reactions-and-actions
   [message-data

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

@@ -0,0 +1,62 @@
+(ns status-im2.contexts.chat.messages.list.style
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.reanimated :as reanimated]))
+
+(defonce ^:const cover-height 168)
+(defonce ^:const overscroll-cover-height 2000)
+(defonce ^:const header-avatar-top-offset -36)
+(defonce ^:const messages-list-bottom-offset 16)
+
+(defn keyboard-avoiding-container
+  [{:keys [top]}]
+  {:position      :relative
+   :flex          1
+   :top           (- top)
+   :margin-bottom (- top)})
+
+(def list-container
+  {:padding-vertical 16})
+
+(defn header-container
+  [show?]
+  {:display          (if show? :flex :none)
+   :background-color (colors/theme-colors colors/white colors/neutral-95)
+   :top              (- overscroll-cover-height)
+   :margin-bottom    (- overscroll-cover-height)})
+
+(defn header-cover
+  [cover-bg-color]
+  {:flex             1
+   :height           (+ overscroll-cover-height cover-height)
+   :background-color cover-bg-color})
+
+(defn header-bottom-part
+  [animation]
+  (reanimated/apply-animations-to-style
+   {:border-top-right-radius animation
+    :border-top-left-radius  animation}
+   {:top              -16
+    :margin-bottom    -16
+    :padding-bottom   24
+    :background-color (colors/theme-colors colors/white colors/neutral-100)}))
+
+(def header-avatar
+  {:top               header-avatar-top-offset
+   :margin-horizontal 20
+   :margin-bottom     header-avatar-top-offset})
+
+(defn header-image
+  [scale-animation top-margin-animation side-margin-animation]
+  (reanimated/apply-animations-to-style
+   {:transform     [{:scale scale-animation}]
+    :margin-top    top-margin-animation
+    :margin-left   side-margin-animation
+    :margin-bottom side-margin-animation}
+   {:align-items :flex-start}))
+
+(def name-container
+  {:flex-direction :row
+   :align-items    :center})
+
+(def bio
+  {:margin-top 8})

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

@@ -3,8 +3,12 @@
             [quo2.core :as quo]
             [react-native.background-timer :as background-timer]
             [react-native.core :as rn]
+            [react-native.hooks :as hooks]
             [react-native.platform :as platform]
+            [react-native.safe-area :as safe-area]
             [reagent.core :as reagent]
+            [quo2.foundations.colors :as colors]
+            [react-native.reanimated :as reanimated]
             [status-im.ui.screens.chat.group :as chat.group]
             [status-im.ui.screens.chat.message.gap :as message.gap]
             [status-im2.common.not-implemented :as not-implemented]
@@ -12,21 +16,35 @@
             [status-im2.contexts.chat.messages.content.deleted.view :as content.deleted]
             [status-im2.contexts.chat.messages.content.view :as message]
             [status-im2.contexts.chat.messages.list.state :as state]
-            [utils.re-frame :as rf]
-            [status-im2.contexts.chat.composer.constants :as composer.constants]))
+            [status-im2.contexts.chat.messages.list.style :as style]
+            [status-im2.contexts.chat.messages.navigation.style :as navigation.style]
+            [status-im2.contexts.chat.composer.constants :as composer.constants]
+            [utils.re-frame :as rf]))
+
+(defonce ^:const threshold-percentage-to-show-floating-scroll-down-button 75)
+(defonce ^:const loading-indicator-extra-spacing 250)
+(defonce ^:const loading-indicator-page-loading-height 100)
+(defonce ^:const scroll-animation-input-range [50 125])
+(defonce ^:const spacing-between-composer-and-content 64)
 
 (defonce messages-list-ref (atom nil))
+(defonce messages-view-height (reagent/atom 0))
+(defonce messages-view-header-height (reagent/atom 0))
+(defonce show-floating-scroll-down-button (reagent/atom false))
 
 (defn list-key-fn [{:keys [message-id value]}] (or message-id value))
 (defn list-ref [ref] (reset! messages-list-ref ref))
 
+(defn scroll-to-offset
+  [position]
+  (some-> ^js @messages-list-ref
+          (.scrollToOffset #js
+                            {:offset   position
+                             :animated true})))
+
 (defn scroll-to-bottom
   []
-  (some-> ^js @messages-list-ref
-          (.scrollToOffset #js {:y 0 :animated true})))
-
-(defonce ^:const threshold-percentage-to-show-floating-scroll-down-button 75)
-(defonce show-floating-scroll-down-button (reagent/atom false))
+  (scroll-to-offset (- 0 style/messages-list-bottom-offset)))
 
 (defn on-scroll
   [evt]
@@ -40,11 +58,11 @@
       (reset! show-floating-scroll-down-button reached-threshold?))))
 
 (defn on-viewable-items-changed
-  [evt]
+  [e]
   (when @messages-list-ref
     (reset! state/first-not-visible-item
-      (when-let [last-visible-element (aget (oops/oget evt "viewableItems")
-                                            (dec (oops/oget evt "viewableItems.length")))]
+      (when-let [last-visible-element (aget (oops/oget e "viewableItems")
+                                            (dec (oops/oget e "viewableItems.length")))]
         (let [index             (oops/oget last-visible-element "index")
               ;; Get first not visible element, if it's a datemark/gap
               ;; we might unnecessarely add messages on receiving as
@@ -55,43 +73,164 @@
                      (= :message (:type first-not-visible)))
             first-not-visible))))))
 
-;;TODO this is not really working in pair with inserting new messages because we stop inserting new
-;;messages
-;;if they outside the viewarea, but we load more here because end is reached,so its slowdown UI because
-;;we
-;;load and render 20 messages more, but we can't prevent this , because otherwise :on-end-reached will
-;;work wrong
+
 (defn list-on-end-reached
-  []
-  (if @state/scrolling
-    (rf/dispatch [:chat.ui/load-more-messages-for-current-chat])
-    (background-timer/set-timeout #(rf/dispatch [:chat.ui/load-more-messages-for-current-chat])
-                                  (if platform/low-device? 700 200))))
+  [scroll-y]
+  ;; FIXME: that's a bit of a hack but we need to update `scroll-y` once the new messages
+  ;; are fetched in order for the header to work properly
+  (let [on-loaded (fn [n]
+                    (reanimated/set-shared-value scroll-y
+                                                 (+ (reanimated/get-shared-value scroll-y)
+                                                    (* n 200))))]
+    (if @state/scrolling
+      (rf/dispatch [:chat.ui/load-more-messages-for-current-chat on-loaded])
+      (background-timer/set-timeout #(rf/dispatch [:chat.ui/load-more-messages-for-current-chat
+                                                   on-loaded])
+                                    (if platform/low-device? 700 100)))))
 
-(defonce messages-view-height (reagent/atom 0))
+(defn contact-icon
+  [{:keys [ens-verified added?]}]
+  (when (or ens-verified added?)
+    [rn/view
+     {:style {:padding-left 10
+              :margin-top   2}}
+     (if ens-verified
+       [quo/icon :i/verified
+        {:no-color true
+         :size     20
+         :color    (colors/theme-colors colors/success-50 colors/success-60)}]
+       (when added?
+         [quo/icon :i/contact
+          {:no-color true
+           :size     20
+           :color    (colors/theme-colors colors/primary-50 colors/primary-60)}]))]))
 
-(defn on-messages-view-layout
-  [evt]
-  (reset! messages-view-height (oops/oget evt "nativeEvent.layout.height")))
+(def header-extrapolation-option
+  {:extrapolateLeft  "clamp"
+   :extrapolateRight "clamp"})
 
-(defn list-footer
-  [{:keys [chat-id]}]
-  (let [loading-messages? (rf/sub [:chats/loading-messages? chat-id])
-        all-loaded?       (rf/sub [:chats/all-loaded? chat-id])]
-    (when (or loading-messages? (not chat-id) (not all-loaded?))
-      [rn/view {:style (when platform/android? {:scaleY -1})}
-       [quo/skeleton @messages-view-height]])))
+(defn loading-view
+  [chat-id]
+  (let [loading-messages?   (rf/sub [:chats/loading-messages? chat-id])
+        all-loaded?         (rf/sub [:chats/all-loaded? chat-id])
+        messages            (rf/sub [:chats/raw-chat-messages-stream chat-id])
+        loading-first-page? (= (count messages) 0)
+        top-spacing         (if loading-first-page? 0 navigation.style/navigation-bar-height)]
+    (when (or loading-messages? (not all-loaded?))
+      [rn/view {:padding-top top-spacing}
+       [quo/skeleton
+        (if loading-first-page?
+          (- @messages-view-height
+             @messages-view-header-height
+             composer.constants/composer-default-height
+             loading-indicator-extra-spacing)
+          loading-indicator-page-loading-height)]])))
 
 (defn list-header
-  [{:keys [chat-id chat-type invitation-admin]}]
-  (when (= chat-type constants/private-group-chat-type)
-    [rn/view {:style (when platform/android? {:scaleY -1})}
-     [chat.group/group-chat-footer chat-id invitation-admin]]))
+  [insets]
+  [rn/view
+   {:background-color (colors/theme-colors colors/white colors/neutral-95)
+    :margin-bottom    (- 0
+                         (:top insets)
+                         (when platform/ios? style/overscroll-cover-height))
+    :height           (+ composer.constants/composer-default-height
+                         (:bottom insets)
+                         spacing-between-composer-and-content
+                         (when platform/ios? style/overscroll-cover-height))}])
+
+(defn f-list-footer-avatar
+  [{:keys [scroll-y display-name online? photo-path]}]
+  (let [image-scale-animation       (reanimated/interpolate scroll-y
+                                                            scroll-animation-input-range
+                                                            [1 0.5]
+                                                            header-extrapolation-option)
+        image-top-margin-animation  (reanimated/interpolate scroll-y
+                                                            scroll-animation-input-range
+                                                            [0 40]
+                                                            header-extrapolation-option)
+        image-side-margin-animation (reanimated/interpolate scroll-y
+                                                            scroll-animation-input-range
+                                                            [0 -20]
+                                                            header-extrapolation-option)]
+    [reanimated/view
+     {:style (style/header-image image-scale-animation
+                                 image-top-margin-animation
+                                 image-side-margin-animation)}
+     [quo/user-avatar
+      {:full-name       display-name
+       :online?         online?
+       :profile-picture photo-path
+       :size            :big}]]))
+
+(defn list-footer-avatar
+  [props]
+  [:f> f-list-footer-avatar props])
+
+(defn f-list-footer
+  [{:keys [chat scroll-y cover-bg-color on-layout]}]
+  (let [{:keys [chat-id chat-name emoji chat-type
+                group-chat]} chat
+        all-loaded?          (rf/sub [:chats/all-loaded? chat-id])
+        display-name         (if (= chat-type constants/one-to-one-chat-type)
+                               (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
+                               (str emoji " " chat-name))
+        {:keys [bio]}        (rf/sub [:contacts/contact-by-identity chat-id])
+        online?              (rf/sub [:visibility-status-updates/online? chat-id])
+        contact              (when-not group-chat
+                               (rf/sub [:contacts/contact-by-address chat-id]))
+        photo-path           (when-not (empty? (:images contact))
+                               (rf/sub [:chats/photo-path chat-id]))
+        border-animation     (reanimated/interpolate scroll-y
+                                                     [30 125]
+                                                     [14 0]
+                                                     header-extrapolation-option)]
+    [rn/view {:flex 1}
+     [rn/view
+      {:style     (style/header-container all-loaded?)
+       :on-layout on-layout}
+      (when cover-bg-color
+        [rn/view {:style (style/header-cover cover-bg-color)}])
+      [reanimated/view {:style (style/header-bottom-part border-animation)}
+       [rn/view {:style style/header-avatar}
+        [rn/view {:style {:align-items :flex-start}}
+         (when-not group-chat
+           [list-footer-avatar
+            {:scroll-y        scroll-y
+             :display-name    display-name
+             :online?         online?
+             :profile-picture photo-path}])]
+        [rn/view {:style style/name-container}
+         [quo/text
+          {:weight          :semi-bold
+           :size            :heading-1
+           :style           {:margin-top (if group-chat 54 12)}
+           :number-of-lines 1}
+          display-name
+          [contact-icon contact]]]
+        (when bio
+          [quo/text {:style style/bio}
+           bio])]]]
+     [loading-view chat-id]]))
+
+(defn list-footer
+  [props]
+  [:f> f-list-footer props])
+
+(defn list-group-chat-header
+  [{:keys [chat-id invitation-admin]}]
+  [rn/view
+   [chat.group/group-chat-footer chat-id invitation-admin]])
+
+(defn footer-on-layout
+  [e]
+  (let [height (oops/oget e "nativeEvent.layout.height")
+        y      (oops/oget e "nativeEvent.layout.y")]
+    (reset! messages-view-header-height (+ height y))))
 
 (defn render-fn
   [{:keys [type value deleted? deleted-for-me? content-type] :as message-data} _ _
-   {:keys [context keyboard-shown]}]
-  [rn/view {:style (when platform/android? {:scaleY -1})}
+   {:keys [context keyboard-shown?]}]
+  [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-95)}
    (if (= type :datemark)
      [quo/divider-date value]
      (if (= content-type constants/content-type-gap)
@@ -100,71 +239,95 @@
        [rn/view {:padding-horizontal 8}
         (if (or deleted? deleted-for-me?)
           [content.deleted/deleted-message message-data context]
-          [message/message-with-reactions message-data context keyboard-shown])]))])
+          [message/message-with-reactions message-data context keyboard-shown?])]))])
+
+(defn scroll-handler
+  [event scroll-y]
+  (let [content-size-y (- (oops/oget event "nativeEvent.contentSize.height")
+                          (oops/oget event "nativeEvent.layoutMeasurement.height"))
+        current-y      (oops/oget event "nativeEvent.contentOffset.y")]
+    (reanimated/set-shared-value scroll-y (- content-size-y current-y))))
 
 (defn messages-list-content
-  [{:keys [chat-id] :as chat} insets keyboard-shown]
-  (fn []
-    (let [context    (rf/sub [:chats/current-chat-message-list-view-context])
-          messages   (rf/sub [:chats/raw-chat-messages-stream chat-id])
-          recording? (rf/sub [:chats/recording?])]
-      [rn/view
-       {:style {:flex 1}}
-       ;; NOTE: DO NOT use anonymous functions for handlers
-       [rn/flat-list
-        {:key-fn                       list-key-fn
-         :ref                          list-ref
-         :header                       [list-header chat]
-         :footer                       [list-footer chat]
-         :data                         messages
-         :render-data                  {:context        context
-                                        :keyboard-shown keyboard-shown}
-         :render-fn                    render-fn
-         :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    (+ composer.constants/composer-default-height
-                                                           (:bottom insets)
-                                                           32)
-                                        :padding-bottom 16}
-         :scroll-indicator-insets      {:top (+ composer.constants/composer-default-height
-                                                (:bottom insets))}
-         :keyboard-dismiss-mode        :interactive
-         :keyboard-should-persist-taps :handled
-         :on-momentum-scroll-begin     state/start-scrolling
-         :on-momentum-scroll-end       state/stop-scrolling
-         :scroll-event-throttle        16
-         :on-scroll                    on-scroll
-         ;; TODO https://github.com/facebook/react-native/issues/30034
-         :inverted                     (when platform/ios? true)
-         :style                        (when platform/android? {:scaleY -1})
-         :on-layout                    on-messages-view-layout
-         :scroll-enabled               (not recording?)}]])))
+  [{:keys [chat insets scroll-y cover-bg-color keyboard-shown?]}]
+  (let [context     (rf/sub [:chats/current-chat-message-list-view-context])
+        messages    (rf/sub [:chats/raw-chat-messages-stream (:chat-id chat)])
+        recording?  (rf/sub [:chats/recording?])
+        all-loaded? (rf/sub [:chats/all-loaded? (:chat-id chat)])]
+    [rn/view {:style {:flex 1}}
+     [rn/flat-list
+      {:key-fn                       list-key-fn
+       :ref                          list-ref
+       :header                       [:<>
+                                      (when (= (:chat-type chat) constants/private-group-chat-type)
+                                        [list-group-chat-header chat])
+                                      [list-header insets]]
+       :footer                       [list-footer
+                                      {:chat           chat
+                                       :scroll-y       scroll-y
+                                       :cover-bg-color cover-bg-color
+                                       :on-layout      footer-on-layout}]
+       :data                         messages
+       :render-data                  {:context         context
+                                      :keyboard-shown? keyboard-shown?}
+       :render-fn                    render-fn
+       :on-viewable-items-changed    on-viewable-items-changed
+       :on-end-reached               #(list-on-end-reached scroll-y)
+       :on-scroll-to-index-failed    identity
+       :content-container-style      {:padding-bottom style/messages-list-bottom-offset}
+       :scroll-indicator-insets      {:top (- composer.constants/composer-default-height 16)}
+       :keyboard-dismiss-mode        :interactive
+       :keyboard-should-persist-taps :handled
+       :on-momentum-scroll-begin     state/start-scrolling
+       :on-momentum-scroll-end       state/stop-scrolling
+       :scroll-event-throttle        16
+       :on-scroll                    (fn [event]
+                                       (scroll-handler event scroll-y)
+                                       (when on-scroll
+                                         (on-scroll event)))
+       :style                        {:background-color (if all-loaded?
+                                                          cover-bg-color
+                                                          (colors/theme-colors colors/white
+                                                                               colors/neutral-95))}
+       :inverted                     true
+       :on-layout                    (fn [e]
+                                       (when platform/android?
+                                         ;; FIXME: this is due to Android not triggering the initial
+                                         ;; scrollTo event
+                                         (scroll-to-offset 1))
+                                       (let [layout-height (oops/oget e "nativeEvent.layout.height")]
+                                         (reset! messages-view-height layout-height)))
+       :scroll-enabled               (not recording?)}]]))
 
-;; This should be replaced with keyboard hook. It has to do with flat-list probably. The keyboard-shown
-;; value updates in the parent component, but does not get passed to the children.
-;; When using listeners and resetting the value on an atom it works.
-(defn use-keyboard-visibility
-  []
-  (let [show-listener (atom nil)
-        hide-listener (atom nil)
-        shown?        (atom nil)]
+(defn f-messages-list
+  [{:keys [chat cover-bg-color header-comp footer-comp]}]
+  (let [insets                                   (safe-area/get-insets)
+        scroll-y                                 (reanimated/use-shared-value 0)
+        {:keys [keyboard-height keyboard-shown]} (hooks/use-keyboard)]
     (rn/use-effect
      (fn []
-       (reset! show-listener
-         (.addListener rn/keyboard "keyboardWillShow" #(reset! shown? true)))
-       (reset! hide-listener
-         (.addListener rn/keyboard "keyboardWillHide" #(reset! shown? false)))
-       (fn []
-         (.remove ^js @show-listener)
-         (.remove ^js @hide-listener))))
-    {:shown? shown?}))
+       (when keyboard-shown
+         (reanimated/set-shared-value scroll-y
+                                      (+ (reanimated/get-shared-value scroll-y)
+                                         keyboard-height))))
+     [keyboard-shown keyboard-height])
+    [rn/keyboard-avoiding-view
+     {:style                    (style/keyboard-avoiding-container insets)
+      :keyboard-vertical-offset (- (:bottom insets))}
 
-(defn- f-messages-list
-  [chat insets]
-  (let [{keyboard-shown? :shown?} (use-keyboard-visibility)]
-    [messages-list-content chat insets keyboard-shown?]))
+     (when header-comp
+       [header-comp {:scroll-y scroll-y}])
+
+     [messages-list-content
+      {:chat            chat
+       :insets          insets
+       :scroll-y        scroll-y
+       :cover-bg-color  cover-bg-color
+       :keyboard-shown? keyboard-shown}]
+
+     (when footer-comp
+       (footer-comp {:insets insets}))]))
 
 (defn messages-list
-  [chat insets]
-  [:f> f-messages-list chat insets])
+  [props]
+  [:f> f-messages-list props])

src/status_im2/contexts/chat/messages/navigation/style.cljs

@@ -0,0 +1,101 @@
+(ns status-im2.contexts.chat.messages.navigation.style
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]
+            [react-native.reanimated :as reanimated]))
+
+(defonce ^:const navigation-bar-height 100)
+(defonce ^:const header-offset 56)
+
+(defn button-container
+  [position]
+  (merge
+   {:width            32
+    :height           32
+    :border-radius    10
+    :justify-content  :center
+    :align-items      :center
+    :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)}
+   position))
+
+(defn blur-view
+  [status-bar-height]
+  {:position       :absolute
+   :top            0
+   :left           0
+   :right          0
+   :height         (- navigation-bar-height
+                      (if platform/ios? 0 status-bar-height))
+   :display        :flex
+   :flex-direction :row
+   :overflow       :hidden})
+
+(defn animated-blur-view
+  [enabled? animation status-bar-height]
+  (reanimated/apply-animations-to-style
+   (when enabled?
+     {:opacity animation})
+   (blur-view status-bar-height)))
+
+(def navigation-view
+  {:z-index 4})
+
+(defn header-container
+  [status-bar-height]
+  {:position       :absolute
+   :top            (- header-offset
+                      (if platform/ios? 0 status-bar-height))
+   :left           0
+   :right          0
+   :padding-bottom 8
+   :display        :flex
+   :flex-direction :row
+   :overflow       :hidden})
+
+(def header
+  {:flex 1})
+
+(defn animated-header
+  [enabled? y-animation opacity-animation]
+  (reanimated/apply-animations-to-style
+   ;; here using `top` won't work on Android, so we are using `translateY`
+   (when enabled?
+     {:transform [{:translateY y-animation}]
+      :opacity   opacity-animation})
+   header))
+
+(defn pinned-banner
+  [status-bar-height]
+  {:position :absolute
+   :left     0
+   :right    0
+   :top      (- navigation-bar-height
+                (if platform/ios? 0 status-bar-height))})
+
+(defn animated-pinned-banner
+  [enabled? animation status-bar-height]
+  (reanimated/apply-animations-to-style
+   (when enabled?
+     {:opacity animation})
+   (pinned-banner status-bar-height)))
+
+(def header-content-container
+  {:flex-direction :row
+   :align-items    :center
+   :margin-left    8
+   :margin-right   8
+   :margin-top     -4
+   :height         40})
+
+(def header-avatar-container
+  {:margin-right 8})
+
+(def header-text-container
+  {:flex 1})
+
+(defn header-display-name
+  []
+  {:color (colors/theme-colors colors/black colors/white)})
+
+(defn header-online
+  []
+  {:color (colors/theme-colors colors/neutral-80-opa-50 colors/white-opa-50)})

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

@@ -0,0 +1,105 @@
+(ns status-im2.contexts.chat.messages.navigation.view
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [re-frame.db]
+            [react-native.core :as rn]
+            [react-native.reanimated :as reanimated]
+            [react-native.safe-area :as safe-area]
+            [status-im2.contexts.chat.messages.navigation.style :as style]
+            [status-im2.contexts.chat.messages.pin.banner.view :as pin.banner]
+            [status-im2.constants :as constants]
+            [utils.re-frame :as rf]
+            [utils.i18n :as i18n]))
+
+(defn f-navigation-view
+  [{:keys [scroll-y]}]
+  (let [insets                   (safe-area/get-insets)
+        status-bar-height        (:top insets)
+        {:keys [group-chat chat-id chat-name emoji
+                chat-type]}      (rf/sub [:chats/current-chat-chat-view])
+        all-loaded?              (rf/sub [:chats/all-loaded? chat-id])
+        display-name             (if (= chat-type constants/one-to-one-chat-type)
+                                   (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
+                                   (str emoji " " chat-name))
+        online?                  (rf/sub [:visibility-status-updates/online? chat-id])
+        contact                  (when-not group-chat
+                                   (rf/sub [:contacts/contact-by-address chat-id]))
+        photo-path               (when-not (empty? (:images contact))
+                                   (rf/sub [:chats/photo-path chat-id]))
+        opacity-animation        (reanimated/interpolate scroll-y
+                                                         [style/navigation-bar-height
+                                                          (+ style/navigation-bar-height 30)]
+                                                         [0 1]
+                                                         {:extrapolateLeft  "clamp"
+                                                          :extrapolateRight "extend"})
+        banner-opacity-animation (reanimated/interpolate scroll-y
+                                                         [(+ style/navigation-bar-height 50)
+                                                          (+ style/navigation-bar-height 100)]
+                                                         [0 1]
+                                                         {:extrapolateLeft  "clamp"
+                                                          :extrapolateRight "clamp"})
+        translate-animation      (reanimated/interpolate scroll-y
+                                                         [(+ style/navigation-bar-height 25)
+                                                          (+ style/navigation-bar-height 100)]
+                                                         [50 0]
+                                                         {:extrapolateLeft  "clamp"
+                                                          :extrapolateRight "clamp"})
+        title-opacity-animation  (reanimated/interpolate scroll-y
+                                                         [0 50]
+                                                         [0 1]
+                                                         {:extrapolateLeft  "clamp"
+                                                          :extrapolateRight "clamp"})]
+    [rn/view {:style style/navigation-view}
+     [reanimated/blur-view
+      {:blurAmount   32
+       :blurType     (colors/theme-colors :xlight :dark)
+       :overlayColor :transparent
+       :style        (style/animated-blur-view all-loaded? opacity-animation status-bar-height)}]
+
+     [rn/view
+      [rn/view {:style (style/header-container status-bar-height)}
+       [rn/touchable-opacity
+        {:active-opacity      1
+         :on-press            #(rf/dispatch [:navigate-back])
+         :accessibility-label :back-button
+         :style               (style/button-container {:margin-left 20})}
+        [quo/icon :i/arrow-left
+         {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
+       [reanimated/view
+        {:style (style/animated-header all-loaded? translate-animation title-opacity-animation)}
+        [rn/view {:style style/header-content-container}
+         (when-not group-chat
+           [rn/view {:style style/header-avatar-container}
+            [quo/user-avatar
+             {:full-name       display-name
+              :online?         online?
+              :profile-picture photo-path
+              :size            :small}]])
+         [rn/view {:style style/header-text-container}
+          [rn/view {:style {:flex-direction :row}}
+           [quo/text
+            {:weight          :semi-bold
+             :size            :paragraph-1
+             :number-of-lines 1
+             :style           (style/header-display-name)}
+            display-name]]
+          (when online?
+            [quo/text
+             {:number-of-lines 1
+              :weight          :regular
+              :size            :paragraph-2
+              :style           (style/header-online)}
+             (i18n/label :t/online)])]]]
+       [rn/touchable-opacity
+        {:active-opacity      1
+         :style               (style/button-container {:margin-right 20})
+         :accessibility-label :options-button}
+        [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]]
+
+      [reanimated/view
+       {:style (style/animated-pinned-banner all-loaded? banner-opacity-animation status-bar-height)}
+       [pin.banner/banner chat-id]]]]))
+
+(defn navigation-view
+  [props]
+  [:f> f-navigation-view props])

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

@@ -1,17 +1,14 @@
 (ns status-im2.contexts.chat.messages.view
-  (:require [quo2.core :as quo]
+  (:require [quo2.foundations.colors :as colors]
             [re-frame.db]
             [react-native.core :as rn]
-            [react-native.safe-area :as safe-area]
             [reagent.core :as reagent]
-            [status-im2.constants :as constants]
             [status-im2.contexts.chat.composer.view :as composer]
             [status-im2.contexts.chat.messages.contact-requests.bottom-drawer :as
              contact-requests.bottom-drawer]
             [status-im2.contexts.chat.messages.list.view :as messages.list]
-            [status-im2.contexts.chat.messages.pin.banner.view :as pin.banner]
+            [status-im2.contexts.chat.messages.navigation.view :as messages.navigation]
             [status-im2.navigation.state :as navigation.state]
-            [utils.debounce :as debounce]
             [utils.re-frame :as rf]))
 
 (defn navigate-back-handler
@@ -24,62 +21,23 @@
     ;; and will call system back button action
     true))
 
-(defn page-nav
-  []
-  (let [{:keys [group-chat chat-id chat-name emoji
-                chat-type]} (rf/sub [:chats/current-chat])
-        display-name        (if (= chat-type constants/one-to-one-chat-type)
-                              (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
-                              (str emoji " " chat-name))
-        online?             (rf/sub [:visibility-status-updates/online? chat-id])
-        contact             (when-not group-chat
-                              (rf/sub [:contacts/contact-by-address chat-id]))
-        photo-path          (rf/sub [:chats/photo-path chat-id])
-        avatar-image-key    (if (seq (:images contact))
-                              :profile-picture
-                              :ring-background)]
-    [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?
-                                            :size            :medium
-                                            avatar-image-key photo-path}
-                                :main-text display-name
-                                :on-press  #(debounce/dispatch-and-chill [:chat.ui/show-profile chat-id]
-                                                                         1000)})
-
-      :left-section          {:on-press            #(do
-                                                      (rf/dispatch [:chat/close])
-                                                      (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}]}]))
-
 (defn chat-render
   []
-  (let [;;NOTE: we want to react only on these fields, do not use full chat map here
-        {:keys [chat-id contact-request-state group-chat able-to-send-message?] :as chat}
-        (rf/sub [:chats/current-chat-chat-view])
-        insets (safe-area/get-insets)]
-    [rn/keyboard-avoiding-view
-     {:style                  {:position :relative :flex 1}
-      :keyboardVerticalOffset (- (:bottom insets))}
-     [page-nav]
-     [pin.banner/banner chat-id]
-     [messages.list/messages-list chat insets]
-     (if-not able-to-send-message?
-       [contact-requests.bottom-drawer/view chat-id contact-request-state group-chat]
-       [:f> composer/composer insets])]))
-
+  (let [{:keys [chat-id
+                contact-request-state
+                group-chat
+                able-to-send-message?]
+         :as   chat} (rf/sub [:chats/current-chat-chat-view])]
+    [messages.list/messages-list
+     {:cover-bg-color (colors/custom-color :turquoise 50 20)
+      :chat           chat
+      :header-comp    (fn [{:keys [scroll-y]}]
+                        [messages.navigation/navigation-view {:scroll-y scroll-y}])
+      :footer-comp    (fn [{:keys [insets]}]
+                        [rn/view
+                         (if-not able-to-send-message?
+                           [contact-requests.bottom-drawer/view chat-id contact-request-state group-chat]
+                           [:f> composer/composer insets])])}]))
 
 (defn chat
   []

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

@@ -26,6 +26,7 @@
   [content-width]
   [rn/image
    {:style  {:resize-mode :stretch
+             :margin-top  32
              :width       content-width}
     :source (resources/get-image :onboarding-illustration)}])
 

src/status_im2/contexts/onboarding/create_profile/style.cljs

@@ -9,12 +9,18 @@
    :margin-right :auto})
 
 (def button-container
-  {:width         "100%"
+  {;:position :absolute
+   ;:flex 1
+   :width         "100%"
    :padding-left  20
    :padding-right 20
    :padding-top   (if platform/android? 0 12)
    :align-self    :flex-end
-   :height        64})
+   :height        64
+   ;:bottom 0
+   ;:left 0
+   ;:right 0
+   })
 
 (def blur-button-container
   (merge button-container
@@ -28,7 +34,8 @@
    :top      0
    :bottom   0
    :left     0
-   :right    0})
+   :right    0
+   :z-index 100})
 
 (def info-message
   {:margin-top 8})

src/status_im2/contexts/onboarding/create_profile/view.cljs

@@ -48,103 +48,107 @@
 
 (defn button-container
   [keyboard-shown? children]
-  (if keyboard-shown?
-    [blur/ios-view
-     {:style style/blur-button-container}
-     children]
-    [rn/view {:style style/view-button-container}
-     children]))
+  [rn/view {:style {:margin-top :auto}}
+   (if keyboard-shown?
+     [blur/ios-view {:style style/blur-button-container}
+      children]
+     [rn/view {:style style/view-button-container}
+      children])])
 
 (defn- f-page
   [{:keys [onboarding-profile-data navigation-bar-top]}]
-  (let [{:keys [image-path display-name color]} onboarding-profile-data
-        full-name                               (reagent/atom display-name)
-        keyboard-shown?                         (reagent/atom false)
-        validation-msg                          (reagent/atom (validation-message @full-name))
-        on-change-text                          (fn [s]
-                                                  (reset! validation-msg (validation-message s))
-                                                  (reset! full-name (string/trim s)))
-        custom-color                            (reagent/atom (or color c/profile-default-color))
-        profile-pic                             (reagent/atom image-path)
-        on-change-profile-pic                   #(reset! profile-pic %)
-        on-change                               #(reset! custom-color %)]
-    (fn []
-      (rn/use-effect
-       (let [will-show-listener (oops/ocall rn/keyboard
-                                            "addListener"
-                                            "keyboardWillShow"
-                                            #(swap! keyboard-shown? (fn [] true)))
-             will-hide-listener (oops/ocall rn/keyboard
-                                            "addListener"
-                                            "keyboardWillHide"
-                                            #(swap! keyboard-shown? (fn [] false)))]
-         (fn []
-           (fn []
-             (oops/ocall will-show-listener "remove")
-             (oops/ocall will-hide-listener "remove"))))
-       [])
+  (reagent/with-let [keyboard-shown?       (reagent/atom false)
+                     will-show-listener    (oops/ocall rn/keyboard
+                                                       "addListener"
+                                                       "keyboardWillShow"
+                                                       #(reset! keyboard-shown? true))
+                     will-hide-listener    (oops/ocall rn/keyboard
+                                                       "addListener"
+                                                       "keyboardWillHide"
+                                                       #(reset! keyboard-shown? false))
+                     {:keys [image-path display-name color]} onboarding-profile-data
+                     full-name             (reagent/atom display-name)
+                     validation-msg        (reagent/atom (validation-message @full-name))
+                     on-change-text        (fn [s]
+                                             (reset! validation-msg (validation-message s))
+                                             (reset! full-name (string/trim s)))
+                     custom-color          (reagent/atom (or color c/profile-default-color))
+                     profile-pic           (reagent/atom image-path)
+                     on-change-profile-pic #(reset! profile-pic %)
+                     on-change             #(reset! custom-color %)]
+    [rn/view {:style style/page-container}
+     [navigation-bar/navigation-bar {:top navigation-bar-top}]
+     [rn/scroll-view
+      {:keyboard-should-persist-taps :always
+       :content-container-style      {:flex-grow 1}}
       [rn/view {:style style/page-container}
-       [navigation-bar/navigation-bar {:top navigation-bar-top}]
-       [rn/scroll-view
-        {:keyboard-should-persist-taps :always
-         :content-container-style      {:flex-grow 1}}
-        [rn/view {:style style/page-container}
+       [rn/view
+        {:style style/content-container}
+        [quo/text
+         {:size   :heading-1
+          :weight :semi-bold
+          :style  style/title} (i18n/label :t/create-profile)]
+        [rn/view
+         {:style style/input-container}
          [rn/view
-          {:style style/content-container}
-          [quo/text
-           {:size   :heading-1
-            :weight :semi-bold
-            :style  style/title} (i18n/label :t/create-profile)]
-          [rn/view
-           {:style style/input-container}
-           [rn/view
-            {:style style/profile-input-container}
-            [quo/profile-input
-             {:customization-color @custom-color
-              :placeholder         (i18n/label :t/your-name)
-              :on-press            (fn []
-                                     (rf/dispatch [:dismiss-keyboard])
-                                     (rf/dispatch
-                                      [:show-bottom-sheet
-                                       {:override-theme :dark
-                                        :content
-                                        (fn []
-                                          [method-menu/view on-change-profile-pic])}]))
-              :image-picker-props  {:profile-picture @profile-pic
-                                    :full-name       @full-name}
-              :title-input-props   {:default-value  @full-name
-                                    :max-length     c/profile-name-max-length
-                                    :on-change-text on-change-text}}]]
-           (when @validation-msg
-             [quo/info-message
-              {:type  :error
-               :size  :default
-               :icon  :i/info
-               :style style/info-message}
-              @validation-msg])
-           [quo/text
-            {:size  :paragraph-2
-             :style style/color-title}
-            (i18n/label :t/accent-colour)]
-           [quo/color-picker
-            {:blur?             true
-             :default-selected? :blue
-             :selected          @custom-color
-             :on-change         on-change}]]]]]
-       [rn/keyboard-avoiding-view {}
-        [button-container @keyboard-shown?
-         [quo/button
-          {:accessibility-label       :submit-create-profile-button
-           :type                      :primary
-           :override-background-color (colors/custom-color @custom-color 60)
-           :on-press                  (fn []
-                                        (rf/dispatch [:onboarding-2/profile-data-set
-                                                      {:image-path   @profile-pic
-                                                       :display-name @full-name
-                                                       :color        @custom-color}]))
-           :style                     style/continue-button
-           :disabled                  (or (not (seq @full-name)) @validation-msg)}
-          (i18n/label :t/continue)]]]])))
+          {:style style/profile-input-container}
+          [quo/profile-input
+           {:customization-color @custom-color
+            :placeholder         (i18n/label :t/your-name)
+            :on-press            (fn []
+                                   (rf/dispatch [:dismiss-keyboard])
+                                   (rf/dispatch
+                                    [:show-bottom-sheet
+                                     {:override-theme :dark
+                                      :content
+                                      (fn []
+                                        [method-menu/view on-change-profile-pic])}]))
+            :image-picker-props  {:profile-picture @profile-pic
+                                  :full-name       @full-name}
+            :title-input-props   {:default-value  @full-name
+                                  :auto-focus     true
+                                  :max-length     c/profile-name-max-length
+                                  :on-change-text on-change-text}}]]
+         (when @validation-msg
+           [quo/info-message
+            {:type  :error
+             :size  :default
+             :icon  :i/info
+             :style style/info-message}
+            @validation-msg])
+         [quo/text
+          {:size   :paragraph-2
+           :weight :medium
+           :style  style/color-title}
+          (i18n/label :t/accent-colour)]
+         [quo/color-picker
+          {:blur?             true
+           :default-selected? :blue
+           :selected          @custom-color
+           :on-change         on-change}]]]]]
+     [rn/keyboard-avoiding-view {:style {:position :absolute
+                                         :top 0
+                                         :bottom 0
+                                         :left 0
+                                         :right 0}
+                                 :pointer-events :box-none}
+      [button-container @keyboard-shown?
+       [quo/button
+        {:accessibility-label       :submit-create-profile-button
+         :type                      :primary
+         :override-background-color (colors/custom-color @custom-color 60)
+         :on-press                  (fn []
+                                      (rf/dispatch [:onboarding-2/profile-data-set
+                                                    {:image-path   @profile-pic
+                                                     :display-name @full-name
+                                                     :color        @custom-color}]))
+         :style                     style/continue-button
+         :disabled                  (or (not (seq @full-name)) @validation-msg)}
+        (i18n/label :t/continue)]]]]
+    (finally
+     (oops/ocall will-show-listener "remove")
+     (oops/ocall will-hide-listener "remove"))
+    ))
 
 (defn create-profile
   []

src/status_im2/contexts/onboarding/intro/style.cljs

@@ -1,60 +1,23 @@
 (ns status-im2.contexts.onboarding.intro.style
   (:require
-    [react-native.platform :as platform]
     [quo2.foundations.colors :as colors]))
 
-(def progress-bar-container
-  {:background-color :transparent
-   :flex-direction   :row
-   :margin-vertical  16})
-
-(defn progress-bar-item
-  [index position end?]
-  {:height       2
-   :flex         1
-   :border-width 1
-   :border-color (if (= index position) colors/white colors/white-opa-10)
-   :margin-right (if end? 0 8)})
-
-(def carousel
-  {:height             92
-   ;; (padding-top) This insets issue needs a consistent implementation across all screens.
-   :padding-top        (if platform/android? 0 44)
-   :position           :absolute
-   :top                0
-   :bottom             0
-   :left               0
-   :right              0
-   :z-index            2
-   :background-color   :transparent
-   :padding-vertical   12
-   :padding-horizontal 20})
-
-(def carousel-text
-  {:background-color :transparent
-   :color            colors/white})
-
 (def page-container
   {:flex            1
    :justify-content :flex-end})
 
-(def page-image
-  {:position     :absolute
-   :top          0
-   :bottom       0
-   :left         0
-   :right        0
-   :width        "100%"
-   :aspect-ratio 1})
-
 (def text-container
   {:flex      1
+   :max-width 180
    :flex-wrap :wrap})
 
 (def plain-text
-  {:flex  1
-   :color (colors/alpha colors/white 0.7)})
+  {:size   :paragraph-2
+   :weight :regular
+   :color  colors/white-opa-70})
 
 (def highlighted-text
-  {:flex  1
-   :color colors/white})
+  {:flex   1
+   :size   :paragraph-2
+   :weight :regular
+   :color  colors/white})

src/status_im2/contexts/onboarding/intro/view.cljs

@@ -21,17 +21,15 @@
                                           (rf/dispatch [:hide-terms-of-services-opt-in-screen]))
                    :heading             (i18n/label :t/new-to-status)
                    :accessibility-label :new-to-status-button}}
-    (i18n/label :t/you-already-use-status)
+    [quo/text
+     {:style style/plain-text}
+     (i18n/label :t/you-already-use-status)]
     [quo/text
      {:style style/text-container}
      [quo/text
-      {:size   :paragraph-2
-       :style  style/plain-text
-       :weight :semi-bold}
+      {:style style/plain-text}
       (i18n/label :t/by-continuing-you-accept)]
      [quo/text
       {:on-press #(rf/dispatch [:open-modal :privacy-policy])
-       :size     :paragraph-2
-       :style    style/highlighted-text
-       :weight   :semi-bold}
+       :style    style/highlighted-text}
       (i18n/label :t/terms-of-service)]]]])

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

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

src/status_im2/contexts/quo_preview/main.cljs

@@ -13,6 +13,7 @@
     [status-im2.contexts.quo-preview.avatars.group-avatar :as group-avatar]
     [status-im2.contexts.quo-preview.avatars.icon-avatar :as icon-avatar]
     [status-im2.contexts.quo-preview.avatars.user-avatar :as user-avatar]
+    [status-im2.contexts.quo-preview.selectors.reactions :as selector-reactions]
     [status-im2.contexts.quo-preview.avatars.wallet-user-avatar :as wallet-user-avatar]
     [status-im2.contexts.quo-preview.banners.banner :as banner]
     [status-im2.contexts.quo-preview.buttons.button :as button]
@@ -82,6 +83,7 @@
     [status-im2.contexts.quo-preview.tabs.account-selector :as account-selector]
     [status-im2.contexts.quo-preview.tabs.segmented-tab :as segmented]
     [status-im2.contexts.quo-preview.tabs.tabs :as tabs]
+    [status-im2.contexts.quo-preview.empty-state.empty-state :as empty-state]
     [status-im2.contexts.quo-preview.tags.context-tags :as context-tags]
     [status-im2.contexts.quo-preview.tags.permission-tag :as permission-tag]
     [status-im2.contexts.quo-preview.tags.status-tags :as status-tags]
@@ -186,6 +188,9 @@
    :dropdowns             [{:name      :dropdown
                             :options   {:topBar {:visible true}}
                             :component dropdown/preview-dropdown}]
+   :empty-state           [{:name      :empty-state
+                            :options   {:topBar {:visible true}}
+                            :component empty-state/preview-empty-state}]
    :info                  [{:name      :info-message
                             :options   {:topBar {:visible true}}
                             :component info-message/preview-info-message}
@@ -296,7 +301,10 @@
                             :component filter/preview}
                            {:name      :selectors
                             :options   {:topBar {:visible true}}
-                            :component selectors/preview-selectors}]
+                            :component selectors/preview-selectors}
+                           {:name      :select-reactions
+                            :options   {:topBar {:visible true}}
+                            :component selector-reactions/preview}]
    :settings              [{:name      :privacy-option
                             :options   {:topBar {:visible true}}
                             :component privacy-option/preview-options}

src/status_im2/contexts/quo_preview/reactions/react.cljs

@@ -1,8 +1,10 @@
 (ns status-im2.contexts.quo-preview.reactions.react
-  (:require [quo2.components.reactions.reaction :as quo2.reaction]
+  (:require [clojure.string :as string]
+            [quo2.components.reactions.reaction :as quo2.reaction]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
+            [status-im2.constants :as constants]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
@@ -12,29 +14,24 @@
    {:label   "Emoji"
     :key     :emoji
     :type    :select
-    :options [{:key   :main-icons/love16
-               :value "Love"}
-              {:key   :main-icons/thumbs-up16
-               :value "Thumbs Up"}
-              {:key   :main-icons/thumbs-down16
-               :value "Thumbs Down"}
-              {:key   :main-icons/laugh16
-               :value "Laugh"}
-              {:key   :main-icons/sad16
-               :value "Sad"}]}
+    :options (for [reaction (vals constants/reactions)]
+               {:key   reaction
+                :value (string/capitalize (name reaction))})}
    {:label "Neutral"
     :key   :neutral?
     :type  :boolean}])
 
 (defn cool-preview
   []
-  (let [state (reagent/atom {:emoji :main-icons/love16})]
+  (let [state (reagent/atom {:emoji :reaction/love})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
        [rn/view {:padding-bottom 150}
         [preview/customizer state descriptor]
         [rn/view
          {:padding-vertical 60
+          :justify-content  :center
+          :flex-direction   :row
           :align-items      :center}
          [quo2.reaction/reaction @state]
          [quo2.reaction/add-reaction @state]]]])))

src/status_im2/contexts/quo_preview/selectors/reactions.cljs

@@ -0,0 +1,30 @@
+(ns status-im2.contexts.quo-preview.selectors.reactions
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [status-im2.constants :as constants]))
+
+(defn cool-preview
+  []
+  [rn/view
+   [rn/view {:style {:margin-vertical 24}}
+    (into [rn/view
+           {:style {:flex            1
+                    :margin-top      200
+                    :flex-direction  :row
+                    :justify-content :center
+                    :align-items     :center}}]
+          (for [emoji (vals constants/reactions)]
+            ^{:key emoji}
+            [quo/reactions emoji {:container-style {:margin-right 5}}]))]])
+
+(defn preview
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
+            :flex             1}}
+   [rn/flat-list
+    {:style                        {:flex 1}
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/navigation/options.cljs

@@ -105,7 +105,9 @@
                    :translucent     true}
    :navigationBar {:backgroundColor colors/black}
    :layout        {:componentBackgroundColor :transparent
-                   :backgroundColor          :transparent}
+                   :backgroundColor          :transparent
+                   ;; issue: https://github.com/wix/react-native-navigation/issues/7726
+                   :orientation              (if platform/ios? ["portrait" "landscape"] ["portrait"])}
    :animations    {:push {:sharedElementTransitions [{:fromId        :shared-element
                                                       :toId          :shared-element
                                                       :interpolation {:type   :decelerate

src/status_im2/setup/i18n_resources.cljs

@@ -1,9 +1,11 @@
 (ns status-im2.setup.i18n-resources
   (:require [clojure.string :as string]
-            [utils.i18n :as i18n]
-            [react-native.languages :as react-native-languages]))
+            [utils.i18n :as i18n]))
 
-(def default-device-language (react-native-languages/get-lang-keyword))
+;; FIXME: that should be replaced with `(react-native-languages/get-lang-keyword)`
+;; in order for languages/translations to work
+;; see https://github.com/status-im/status-mobile/issues/16058 for details
+(def default-device-language :en)
 
 (def languages
   #{:ar :bn :de :el :en :es :es_419 :es_AR :fil :fr :hi :id :in :it :ja :ko :ms :nl :pl :pt :pt_BR :ru

status-go-version.json

@@ -3,7 +3,7 @@
     "_comment": "Instead use: scripts/update-status-go.sh <rev>",
     "owner": "status-im",
     "repo": "status-go",
-    "version": "v0.154.1",
-    "commit-sha1": "1c51df20e002e9b93203a9128882d60deed6f47a",
-    "src-sha256": "0mhznnkdx7946mkz8bzlsv70iv2aynirh9dsm5cyanjjap123qgv"
+    "version": "v0.154.2",
+    "commit-sha1": "5d62a9eef4a6676d62a9a51cdadea596d3d9a658",
+    "src-sha256": "148z0r8iyqanx91hgvbm7wx1nf82v2am1hyy6f892vmbc2y8axnx"
 }

translations/en.json

@@ -1527,7 +1527,7 @@
     "your-data-belongs-to-you": "If you lose your seed phrase you lose your data and funds",
     "your-data-belongs-to-you-description": "If you lose access, for example by losing your phone, you can only access your keys with your seed phrase. No one, but you has your seed phrase. Write it down. Keep it safe",
     "your-identifiers": "Your identicon ring, chat key and emojihash will help others tell you from impersonators",
-    "your-name": "Your Name",
+    "your-name": "Your name",
     "your-recovery-phrase": "Your seed phrase",
     "your-recovery-phrase-description": "This is your seed phrase. You use it to prove that this is your wallet. You only get to see it once! Write it on paper and keep it in a secure place. You will need it if you lose or reinstall your wallet.",
     "custom-seed-phrase": "Invalid seed phrase",