Messages contact requests (#14221)

* feat: messages contact requests

src/quo/components/bottom_sheet/view.cljs

@@ -44,7 +44,7 @@
                                                      (+ 50 keyboard-height-android-delta) ;; TODO : remove 50 when react-native-navigation v8 will be implemented https://github.com/wix/react-native-navigation/issues/7225
                                                      0))
         min-height                (+ (* styles/vertical-padding 2) (:bottom safe-area))
-        max-height                (- window-height (:top safe-area) styles/margin-top)
+        max-height                (- window-height (:top safe-area))
         visible                   (react/state false)
 
         master-translation-y (animated/use-value 0)
@@ -202,10 +202,8 @@
                                                     :wait-for master-ref
                                                     :enabled  (and (not disable-drag?)
                                                                    (not= sheet-height max-height))})
-        [animated/view {:height sheet-height}
+        [animated/view {:height sheet-height
-         [animated/scroll-view {:bounces        false
+                        :flex           1}
-                                :flex           1
-                                :scroll-enabled (= sheet-height max-height)}
          [animated/view {:style     {:padding-top    styles/vertical-padding
                                      :padding-bottom (+ styles/vertical-padding
                                                         (if (and platform/ios? keyboard-shown)
@@ -213,6 +211,6 @@
                                                           (:bottom safe-area)))}
                          :on-layout #(reset! height (.-nativeEvent.layout.height ^js %))}
           (into [:<>]
-                 (react/get-children children))]]]]]])))
+                (react/get-children children))]]]]])))
 
 (def bottom-sheet (reagent/adapt-react-class (react/memo bottom-sheet-hooks)))

src/quo2/components/community/discover_card.cljs

@@ -0,0 +1,94 @@
+(ns quo2.components.community.discover-card
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [status-im.ui.screens.communities.styles :as styles]
+            [status-im.ui.components.react :as react]))
+
+;; Discover card placeholders images.
+;; TODO replaced when real data is available
+(def images
+  {:images [{:id 1 :column-images [{:id 1   :image   ""}]}
+            {:id 2 :column-images [{}]}]})
+
+(defn card-title-and-description [title description]
+  [react/view
+   {:flex               1
+    :padding-top        8
+    :padding-bottom     8
+    :border-radius      12}
+   [react/view {:flex                1
+                :padding-horizontal  12}
+    [text/text {:accessibility-label :community-name-text
+                :ellipsize-mode      :tail
+                :number-of-lines     1
+                :weight              :semi-bold
+                :size                :paragraph-1}
+     title]
+    [text/text {:accessibility-label :community-name-text
+                :ellipsize-mode      :tail
+                :number-of-lines     1
+                :color               (colors/theme-colors
+                                      colors/neutral-50
+                                      colors/neutral-40)
+                :weight               :regular
+                :size                 :paragraph-2}
+     description]]])
+
+(defn placeholder-list-images [{:keys [images width height border-radius]}]
+  [react/view
+   [react/view {:justify-content    :center}
+    (for [{:keys [id]} images]
+      ^{:key id}
+      [react/view {:border-radius    border-radius
+                   :margin-top       4
+                   :margin-right     4
+                   :width            width
+                   :height           height
+                   :background-color colors/neutral-10}])]])
+
+(defn placeholder-row-images [{:keys [first-image last-image images width height
+                                      border-radius]}]
+  [react/view
+   (when first-image
+     [react/view {:border-bottom-right-radius 6
+                  :border-bottom-left-radius  6
+                  :margin-right               4
+                  :width                      width
+                  :height                     height
+                  :background-color           colors/neutral-10}])
+   (when images
+     [placeholder-list-images {:images        images
+                               :width         32
+                               :height        32
+                               :border-radius 6}])
+   (when last-image
+     [react/view {:border-top-left-radius    border-radius
+                  :border-top-right-radius   6
+                  :margin-top                4
+                  :width                     width
+                  :height                    height
+                  :background-color          colors/neutral-10}])])
+
+(defn discover-card [{:keys [title description on-press]}]
+  (let [on-joined-images     (get images   :images)]
+    [react/touchable-without-feedback
+     {:on-press on-press}
+     [react/view (merge (styles/community-card 16)
+                        {:background-color  (colors/theme-colors
+                                             colors/white
+                                             colors/neutral-90)}
+                        {:flex-direction  :row
+                         :margin-horizontal 20
+                         :height          56
+                         :padding-right   12})
+      [card-title-and-description title description]
+      (for [{:keys [id column-images]} on-joined-images]
+        ^{:key id}
+        [placeholder-row-images {:images        (when (= id 1)
+                                                  column-images)
+                                 :width         32
+                                 :height        (if (= id 1) 8 26)
+                                 :border-radius 6
+                                 :first-image   "" ; TODO replace with real data
+                                 :last-image    ""}]) ; TODO replace with real data
+      ]]))

src/quo2/components/list_items/received_contact_request.cljs

@@ -0,0 +1,84 @@
+(ns quo2.components.list-items.received-contact-request
+  (:require [quo.react-native :as rn]
+            [quo2.foundations.colors :as colors]
+            [status-im.utils.handlers :refer [<sub >evt]]
+            [quo2.components.avatars.user-avatar :as user-avatar]
+            [quo2.foundations.typography :as typography]
+            [clojure.string :as str]
+            [status-im.utils.utils :as utils.utils]
+            [status-im.utils.datetime :as time]
+            [status-im.i18n.i18n :as i18n]
+            [quo2.components.notifications.notification-dot :refer [notification-dot]]))
+
+(defn get-display-name [chat-id no-ens-name no-nickname]
+  (let [name (first (<sub [:contacts/contact-two-names-by-identity chat-id]))]
+    (if (and no-ens-name no-nickname)
+      (let [[word1 word2] (str/split name " ")]
+        (str word1 " " word2))
+      name)))
+
+(defn list-item [{:keys [chat-id image contact message timestamp read]}]
+  (let [no-ens-name  (str/blank? (get-in message [:content :ens-name]))
+        no-nickname  (nil? (get-in contact [:names :nickname]))
+        display-name (get-display-name chat-id no-ens-name no-nickname)]
+    [rn/view {:style {:flex-direction :row
+                      :padding-top    8
+                      :margin-top     4
+                      :padding-bottom 12
+                      :flex           1}}
+     (when-not read
+       [notification-dot {:right 32 :top 16}])
+     [user-avatar/user-avatar {:full-name         display-name
+                               :status-indicator? true
+                               :online?           true
+                               :size              :small
+                               :profile-picture   image
+                               :ring?             false}]
+     [rn/view {:style {:margin-horizontal 8}}
+      [rn/view {:style {:flex-direction :row}}
+       [rn/text {:style (merge typography/font-semi-bold typography/paragraph-1
+                               {:color        (colors/theme-colors :black :white)
+                                :margin-right 8})} display-name]
+       (when no-ens-name [rn/text {:style (merge typography/font-regular typography/label
+                                                 {:color      (colors/theme-colors colors/neutral-50 colors/neutral-40)
+                                                  :margin-top 4})}
+                          (str (utils.utils/get-shortened-address chat-id) " · ")])
+       [rn/text {:style (merge typography/font-regular typography/label
+                               {:color      (colors/theme-colors colors/neutral-50 colors/neutral-40)
+                                :margin-top 4})}
+        (time/to-short-str timestamp)]]
+      [rn/view {:style {:border-radius      12
+                        :margin-top         10
+                        :padding-horizontal 12
+                        :padding-vertical   8
+                        :border-width       1
+                        :border-color       (colors/theme-colors colors/neutral-20 colors/neutral-70)}}
+       [rn/text {:style (merge typography/font-regular
+                               typography/paragraph-1
+                               {:color (colors/theme-colors :black :white)})}
+        (:text (:content message))]]
+      [rn/view {:style {:margin-top     12
+                        :flex-direction :row}}
+       [rn/touchable-opacity {:accessibility-label :decline-cr
+                              :on-press            #(>evt [:contact-requests.ui/decline-request (:message-id message)])
+                              :active-opacity      1
+                              :style               {:background-color   (colors/theme-colors colors/danger-50 colors/danger-60)
+                                                    :justify-content    :center
+                                                    :align-items        :center
+                                                    :align-self         :flex-start
+                                                    :border-radius      8
+                                                    :padding-vertical   4
+                                                    :padding-horizontal 8}}
+        [rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color :white})} (i18n/label :t/decline)]]
+       [rn/touchable-opacity {:accessibility-label :accept-cr
+                              :on-press            #(>evt [:contact-requests.ui/accept-request (:message-id message)])
+                              :active-opacity      1
+                              :style               {:background-color   (colors/theme-colors colors/success-50 colors/success-60)
+                                                    :justify-content    :center
+                                                    :align-items        :center
+                                                    :align-self         :flex-start
+                                                    :border-radius      8
+                                                    :padding-vertical   4
+                                                    :padding-horizontal 8
+                                                    :margin-left        8}}
+        [rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color :white})} (i18n/label :t/accept)]]]]]))

src/quo2/components/notifications/notification_dot.cljs

@@ -0,0 +1,12 @@
+(ns quo2.components.notifications.notification-dot
+  (:require [quo.react-native :as rn]
+            [quo2.foundations.colors :as colors]))
+
+(defn notification-dot [style]
+  [rn/view {:style (merge {:background-color (colors/theme-colors colors/primary-50 colors/primary-60)
+                           :width            8
+                           :height           8
+                           :border-radius    4
+                           :position         :absolute
+                           :z-index          1}
+                          style)}])

src/quo2/components/tabs/tabs.cljs

@@ -5,7 +5,9 @@
             [reagent.core :as reagent]
             [status-im.ui.components.react :as react]
             [status-im.utils.core :as utils]
-            [status-im.utils.number :as number-utils]))
+            [status-im.utils.number :as number-utils]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.notifications.notification-dot :refer [notification-dot]]))
 
 (def default-tab-size 32)
 
@@ -14,9 +16,21 @@
     (fn [{:keys [data size] :or {size default-tab-size}}]
       [rn/view (merge {:flex-direction :row} style)
        (doall
-        (for [{:keys [label id]} data]
+        (for [{:keys [label id new-info]} data]
           ^{:key id}
           [rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
+           (when new-info
+             [rn/view {:position         :absolute
+                       :z-index          1
+                       :right            -2
+                       :top              -2
+                       :width            10
+                       :height           10
+                       :border-radius    5
+                       :justify-content  :center
+                       :align-items      :center
+                       :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}
+              [notification-dot]])
            [tab/tab
             {:id       id
              :size     size

src/status_im/ui2/screens/chat/home.cljs

@@ -9,7 +9,7 @@
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.home.styles :as styles]
             [status-im.ui.screens.home.views.inner-item :refer [home-list-item]]
-            [quo.design-system.colors :as colors]
+            [quo.design-system.colors :as quo.colors]
             [quo.core :as quo]
             [quo.platform :as platform]
             [status-im.add-new.core :as new-chat]
@@ -22,23 +22,28 @@
             [status-im.ui.screens.chat.sheets :as sheets]
             [status-im.ui.components.tabbar.core :as tabbar]
             [status-im.ui.components.invite.views :as invite]
-            [status-im.utils.handlers :refer [<sub]]
+            [status-im.utils.handlers :refer [<sub >evt]]
             [status-im.utils.config :as config]
             [quo2.components.markdown.text :as quo2.text]
             [status-im.qr-scanner.core :as qr-scanner]
             [status-im.ui.components.chat-icon.styles :as chat-icon.styles]
             [quo.react-native :as rn]
-            [quo2.foundations.colors :as quo2.colors]
+            [quo.react]
+            [quo2.foundations.colors :as colors]
             [quo2.foundations.typography :as typography]
             [quo2.components.buttons.button :as quo2.button]
             [quo2.components.tabs.tabs :as quo2.tabs]
+            [quo2.components.community.discover-card :as discover-card]
             [status-im.multiaccounts.core :as multiaccounts]
-            [status-im.ui.components.chat-icon.screen :as chat-icon])
+            [status-im.ui.components.chat-icon.screen :as chat-icon]
+            [quo2.components.icon :as quo2.icons]
+            [quo.components.safe-area :as safe-area]
+            [quo2.components.list-items.received-contact-request :as received-contact-request])
   (:require-macros [status-im.utils.views :as views]))
 
 (defn home-tooltip-view []
   [rn/view (styles/chat-tooltip)
-   [rn/view {:style {:width       66 :position :absolute :top -6 :background-color colors/white
+   [rn/view {:style {:width       66 :position :absolute :top -6 :background-color quo.colors/white
                      :align-items :center}}
     [rn/image {:source (resources/get-image :empty-chats-header)
                :style  {:width 50 :height 50}}]]
@@ -47,7 +52,7 @@
                            :width    44 :height 44 :align-items :center :justify-content :center}
      :on-press            #(re-frame/dispatch [:multiaccounts.ui/hide-home-tooltip])
      :accessibility-label :hide-home-button}
-    [icons/icon :main-icons/close-circle {:color colors/gray}]]
+    [icons/icon :main-icons/close-circle {:color quo.colors/gray}]]
    [react/i18n-text {:style styles/no-chats-text :key :chat-and-transact}]
    [rn/view {:align-items   :center
              :margin-top    8
@@ -133,7 +138,7 @@
     [quo/list-item
      {:title            first-name
       :subtitle         second-name
-      :background-color quo2.colors/neutral-5
+      :background-color colors/neutral-5
       :on-press         (fn []
                           (re-frame/dispatch [:dismiss-keyboard])
                           (if platform/android?
@@ -141,9 +146,9 @@
                             (re-frame/dispatch [:chat.ui/navigate-to-chat public-key]))
                           (re-frame/dispatch [:search/home-filter-changed nil])
                           (re-frame/dispatch [:accept-all-activity-center-notifications-from-chat public-key]))
-      :on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet
+      ;:on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet TODO: new UI yet to be implemented
-                                          {:content (fn []
+      ;                                    {:content (fn []
-                                                      [sheets/actions row])}])
+      ;                                                [sheets/actions row])}])
       :icon             [chat-icon/contact-icon-contacts-tab
                          (multiaccounts/displayed-photo row)]}]))
 
@@ -171,17 +176,110 @@
     (vals @data)))
 
 (defn contacts-section-header [{:keys [title]}]
-  [rn/view {:style {:border-top-width 1 :border-top-color quo2.colors/neutral-20 :padding-vertical 8 :padding-horizontal 20 :margin-top 8}}
+  [rn/view {:style {:border-top-width 1 :border-top-color colors/neutral-20 :padding-vertical 8 :padding-horizontal 20 :margin-top 8}}
-   [rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color quo2.colors/neutral-50})} title]])
+   [rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color colors/neutral-50})} title]])
+
+(defn find-contact-requests [notifications]
+  (let [received-requests (atom [])
+        has-unread (atom false)]
+    (doseq [i (range (count notifications))]
+      (doseq [j (range (count (:data (nth notifications i))))]
+        (when (= 1 (get-in (nth (:data (nth notifications i)) j) [:message :contact-request-state]))
+          (swap! received-requests conj (nth (:data (nth notifications i)) j)))
+        (when (= false (get-in (nth (:data (nth notifications i)) j) [:read]))
+          (reset! has-unread true))))
+    {:received-requests @received-requests :has-unread @has-unread}))
+
+(def selected-requests-tab (reagent/atom :received))
+
+(defn contact-requests-sheet []
+  [:f>
+   (fn []
+     (let [{window-height :height} (rn/use-window-dimensions)
+           safe-area         (safe-area/use-safe-area)
+           notifications     (<sub [:activity.center/notifications-grouped-by-date])
+           {received-requests :received-requests} (find-contact-requests notifications)
+           sent-requests     []]
+       [rn/view {:style {:margin-left 20
+                         :height      (- window-height (:top safe-area))}}
+        [rn/touchable-opacity
+         {:on-press #(>evt [:bottom-sheet/hide])
+          :style
+          {:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
+           :width            32
+           :height           32
+           :border-radius    10
+           :justify-content  :center
+           :align-items      :center
+           :margin-bottom    24}}
+         [quo2.icons/icon :main-icons2/close {:color (colors/theme-colors "#000000" "#ffffff")}]]
+        [rn/text {:style (merge
+                          typography/heading-1
+                          typography/font-semi-bold
+                          {:color (colors/theme-colors "#000000" "#ffffff")})}
+         (i18n/label :t/pending-requests)]
+        [quo2.tabs/tabs
+         {:style          {:margin-top 12 :margin-bottom 20}
+          :size           32
+          :on-change      #(reset! selected-requests-tab %)
+          :default-active :received
+          :data           [{:id    :received
+                            :label (i18n/label :t/received)}
+                           {:id    :sent
+                            :label (i18n/label :t/sent)}]}]
+        [list/flat-list
+         {:key-fn    :first
+          :data      (if (= @selected-requests-tab :received) received-requests sent-requests)
+          :render-fn received-contact-request/list-item}]]))])
+
+(defn contact-requests [count]
+  [rn/touchable-opacity
+   {:active-opacity 1
+    :on-press       #(do
+                       (>evt
+                        [:bottom-sheet/show-sheet
+                         {:content (fn [] [contact-requests-sheet])}])
+                       (>evt [:mark-all-activity-center-notifications-as-read]))
+    :style          {:flex-direction     :row
+                     :margin             8
+                     :padding-horizontal 12
+                     :padding-vertical   8
+                     :align-items        :center}}
+   [rn/view {:style {:justify-content :center
+                     :align-items     :center
+                     :width           32
+                     :height          32
+                     :border-radius   16
+                     :border-width    1
+                     :border-color    (colors/theme-colors colors/neutral-20 colors/neutral-80)}}
+    [quo2.icons/icon :main-icons2/pending-user {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]]
+   [rn/view {:style {:margin-left 8}}
+    [rn/text {:style
+              (merge typography/paragraph-1 typography/font-semi-bold {:color (colors/theme-colors "#000000" "#ffffff")})} (i18n/label :t/pending-requests)]
+    [rn/text {:style (merge typography/paragraph-2 typography/font-regular {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)})} "Alice, Pedro and 3 others"]]
+   [rn/view {:style {:width            16
+                     :height           16
+                     :position         :absolute
+                     :right            22
+                     :border-radius    6
+                     :background-color (colors/theme-colors colors/primary-50 colors/primary-60)}}
+    [rn/text {:style (merge typography/font-medium typography/label {:color "#ffffff" :text-align :center})} count]]])
 
 (defn chats []
   (let [{:keys [items search-filter]} (<sub [:home-items])
         current-active-tab @selected-tab
         items              (prepare-items current-active-tab items)
         contacts           (<sub [:contacts/active])
-        contacts (prepare-contacts contacts)]
+        contacts           (prepare-contacts contacts)
+        notifications      (<sub [:activity.center/notifications-grouped-by-date])
+        {requests :received-requests new-info :has-unread} (find-contact-requests notifications)]
     [rn/view {:style {:flex 1}}
-     [quo2.tabs/tabs {:style {:margin-left 20 :margin-bottom 20} :size 32
+     [discover-card/discover-card {:title       (i18n/label :t/invite-friends-to-status)
+                                   :description (i18n/label :t/share-invite-link)}]
+     [quo2.tabs/tabs {:style          {:margin-left   20
+                                       :margin-bottom 20
+                                       :margin-top    24}
+                      :size           32
                       :on-change      #(reset! selected-tab %)
                       :default-active selected-tab
                       :data           [{:id    :recent
@@ -189,7 +287,8 @@
                                        {:id    :groups
                                         :label (i18n/label :t/groups)}
                                        {:id    :contacts
-                                        :label (i18n/label :t/contacts)}]}]
+                                        :label (i18n/label :t/contacts)
+                                        :new-info new-info}]}]
      (if (and (empty? items)
               (empty? search-filter)
               (not @search-active?))
@@ -202,12 +301,14 @@
            :keyboard-should-persist-taps :always
            :data                         items
            :render-fn                    render-fn}]
+         [rn/view {:style {:flex 1}} (when (> (count requests) 0)
+                                       [contact-requests (count requests)])
           [list/section-list
            {:key-fn                         :title
             :sticky-section-headers-enabled false
             :sections                       contacts
             :render-section-header-fn       contacts-section-header
-           :render-fn                      render-contact}]))]))
+            :render-fn                      render-contact}]]))]))
 
 (views/defview chats-list []
   (views/letsubs [loading? [:chats/loading?]]
@@ -239,7 +340,7 @@
                                                   (if config/new-activity-center-enabled?
                                                     (re-frame/dispatch [:navigate-to :activity-center])
                                                     (re-frame/dispatch [:navigate-to :notifications-center])))}
-      [icons/icon :main-icons/notification2 {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]]
+      [icons/icon :main-icons/notification2 {:color (colors/theme-colors colors/neutral-100 colors/white)}]]
      (when (pos? notif-count)
        [rn/view {:style          (merge (styles/counter-public-container) {:top 5 :right 5})
                  :pointer-events :none}
@@ -255,7 +356,7 @@
                        :on-press            #(do
                                                (re-frame/dispatch [::qr-scanner/scan-code
                                                                    {:handler ::qr-scanner/on-scan-success}]))}
-   [icons/icon :main-icons/qr2 {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]])
+   [icons/icon :main-icons/qr2 {:color (colors/theme-colors colors/neutral-100 colors/white)}]])
 
 (defn scan-button []
   [quo2.button/button {:type                :grey
@@ -265,7 +366,7 @@
                        :on-press            #(do
                                                (re-frame/dispatch [::qr-scanner/scan-code
                                                                    {:handler ::qr-scanner/on-scan-success}]))}
-   [icons/icon :main-icons/scan2 {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]])
+   [icons/icon :main-icons/scan2 {:color (colors/theme-colors colors/neutral-100 colors/white)}]])
 
 (views/defview profile-button []
   (views/letsubs [{:keys [public-key preferred-name emoji]} [:multiaccount]]
@@ -275,12 +376,15 @@
        :chat-icon chat-icon.styles/chat-icon-chat-list}]]))
 
 (defn home []
+  [:f>
+   (fn []
+     (quo.react/effect! #(re-frame/dispatch [:get-activity-center-notifications]))
      [rn/keyboard-avoiding-view {:style         {:flex             1
-                                      :background-color (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/neutral-95)}
+                                                 :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}
                                  :ignore-offset true}
       [topbar/topbar {:navigation      :none
                       :use-insets      true
-                   :background (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/neutral-95)
+                      :background      (colors/theme-colors colors/neutral-5 colors/neutral-95)
                       :left-component  [rn/view {:flex-direction :row :margin-left 20}
                                         [profile-button]]
                       :right-component [rn/view {:flex-direction :row :margin-right 20}
@@ -293,9 +397,9 @@
                 :align-items       :center
                 :margin-horizontal 20
                 :margin-top        15
-             :margin-bottom 8}
+                :margin-bottom     20}
        [quo2.text/text {:size :heading-1 :weight :semi-bold} (i18n/label :t/messages)]
        [plus-button]]
       [chats-list]
-   [tabbar/tabs-counts-subscriptions]])
+      [tabbar/tabs-counts-subscriptions]])])
 

src/status_im/utils/utils.cljs

@@ -82,7 +82,7 @@
   and adds unicode ellipsis in between"
   [address]
   (when address
-    (str (subs address 0 6) "\u2026" (subs address (- (count address) 4) (count address)))))
+    (str (subs address 0 6) "\u2026" (subs address (- (count address) 3) (count address)))))
 
 (defn get-shortened-checksum-address [address]
   (when address

translations/en.json

@@ -1775,7 +1775,7 @@
     "new-ui": "New UI",
     "send-contact-request-message": "To start a chat you need to become contacts",
     "contact-request": "Contact request",
-    "contact-requests": "Contact Requests",
+    "contact-requests": "Contact requests",
     "say-hi": "Say hi",
     "opened": "Opened",
     "accepted": "Accepted",
@@ -1824,5 +1824,10 @@
     "blank-messages-text": "Your messages will be here",
     "groups": "Groups",
     "shell-placeholder-title": "Your apps will run here",
-    "shell-placeholder-subtitle": "Open tabs of your communities, messages,\nwallet account and browser windows"
+    "shell-placeholder-subtitle": "Open tabs of your communities, messages,\nwallet account and browser windows",
+    "invite-friends-to-status": "Invite friends to status",
+    "share-invite-link": "Share an invite link",
+    "pending-requests": "Pending requests",
+    "received": "Received",
+    "sent": "Sent"
 }