Update UI for group chat creation and profile

src/status_im/contact/core.cljs

@@ -156,7 +156,7 @@
             {:db (assoc db
                         :group/selected-contacts #{}
                         :new-chat-name "")}
-            (navigation/navigate-to-cofx :contact-toggle-list nil)))
+            (navigation/navigate-to-cofx :create-group-chat nil)))
 
 (fx/defn set-tribute
   [{:keys [db] :as cofx} public-key tribute-to-talk]

src/status_im/contact/db.cljs

@@ -1,5 +1,6 @@
 (ns status-im.contact.db
   (:require [cljs.spec.alpha :as spec]
+            [clojure.set :as cset]
             [status-im.ethereum.core :as ethereum]
             [status-im.tribute-to-talk.db :as tribute-to-talk.db]
             [status-im.utils.gfycat.core :as gfycat]
@@ -105,10 +106,12 @@
     (query-fn (comp participant-set :public-key) (vals all-contacts))))
 
 (defn get-all-contacts-in-group-chat
-  [members admins contacts current-account]
-  (let [{:keys [public-key] :as current-account-contact}
-        (select-keys current-account [:name :photo-path :public-key])
-        all-contacts (assoc contacts public-key current-account-contact)]
+  [members admins contacts {:keys [public-key] :as current-account}]
+  (let [current-contact (-> current-account
+                            (select-keys  [:name :preferred-name :public-key :photo-path])
+                            (cset/rename-keys {:name           :alias
+                                               :preferred-name :name}))
+        all-contacts    (assoc contacts public-key current-contact)]
     (->> members
          (map #(or (get all-contacts %)
                    (public-key->new-contact %)))

src/status_im/events.cljs

@@ -768,16 +768,6 @@
  (fn [cofx [_ chat-name]]
    (group-chats/create cofx chat-name)))
 
-(handlers/register-handler-fx
- :group-chats.ui/name-changed
- (fn [cofx [_ chat-name]]
-   (group-chats/handle-name-changed cofx chat-name)))
-
-(handlers/register-handler-fx
- :group-chats.ui/save-pressed
- (fn [cofx _]
-   (group-chats/save cofx)))
-
 (handlers/register-handler-fx
  :group-chats.ui/add-members-pressed
  (fn [cofx _]
@@ -794,18 +784,12 @@
    (group-chats/make-admin cofx chat-id public-key)))
 
 (handlers/register-handler-fx
- :group-chats.ui/remove-chat-pressed
+ :group-chats.ui/leave-chat-pressed
  (fn [_ [_ chat-id group?]]
-   {:ui/show-confirmation {:title               (i18n/label :t/delete-confirmation)
-                           :content             (i18n/label :t/delete-chat-confirmation)
-                           :confirm-button-text (i18n/label :t/delete)
-                           :on-accept           #(re-frame/dispatch [:group-chats.ui/remove-chat-confirmed chat-id])}}))
-
-(handlers/register-handler-fx
- :group-chats.ui/remove-chat-confirmed
- (fn [cofx [_ chat-id]]
-   (group-chats/remove cofx chat-id)))
-
+   {:ui/show-confirmation {:title               (i18n/label :t/leave-confirmation)
+                           :content             (i18n/label :t/leave-chat-confirmation)
+                           :confirm-button-text (i18n/label :t/leave)
+                           :on-accept           #(re-frame/dispatch [:group-chats.ui/leave-chat-confirmed chat-id])}}))
 (handlers/register-handler-fx
  :group-chats.ui/join-pressed
  (fn [cofx [_ chat-id]]

src/status_im/group_chats/core.cljs

@@ -98,33 +98,25 @@
   {::json-rpc/call [{:method (json-rpc/call-ext-method (waku/enabled? cofx) "addMembersToGroupChat")
                      :params [nil current-chat-id selected-participants]
                      :on-success #(re-frame/dispatch [::chat-updated %])}]})
-(fx/defn remove
-  "Remove & leave chat"
+
+(fx/defn leave
+  "Leave chat"
+  {:events [:group-chats.ui/leave-chat-confirmed]}
   [{:keys [db] :as cofx} chat-id]
   {::json-rpc/call [{:method (json-rpc/call-ext-method (waku/enabled? cofx) "leaveGroupChat")
-                     :params [nil chat-id]
+                     :params [nil chat-id true]
                      :on-success #(re-frame/dispatch [::chat-updated %])}]})
 
 (defn- valid-name? [name]
   (spec/valid? :profile/name name))
 
-(fx/defn update-name [{:keys [db]} name]
-  {:db (-> db
-           (assoc-in [:group-chat-profile/profile :valid-name?] (valid-name? name))
-           (assoc-in [:group-chat-profile/profile :name] name))})
-
-(fx/defn handle-name-changed
-  "Store name in profile scratchpad"
-  [cofx new-chat-name]
-  (update-name cofx new-chat-name))
-
-(fx/defn save
+(fx/defn name-changed
   "Save chat from edited profile"
-  [{:keys [db] :as cofx}]
-  (let [new-name (get-in cofx [:db :group-chat-profile/profile :name])
-        current-chat-id (:current-chat-id db)]
-    (when (valid-name? new-name)
-      {::json-rpc/call [{:method (json-rpc/call-ext-method (waku/enabled? cofx) "changeGroupChatName")
-                         :params [nil current-chat-id new-name]
-                         :on-success #(re-frame/dispatch [::chat-updated %])}]})))
+  {:events [:group-chats.ui/name-changed]}
+  [{:keys [db] :as cofx} chat-id new-name]
+  (when (valid-name? new-name)
+    {:db (assoc-in db [:chats chat-id :name] new-name)
+     ::json-rpc/call [{:method (json-rpc/call-ext-method (waku/enabled? cofx) "changeGroupChatName")
+                       :params [nil chat-id new-name]
+                       :on-success #(re-frame/dispatch [::chat-updated %])}]}))
 

src/status_im/group_chats/db.cljs

@@ -2,13 +2,7 @@
   (:require [status-im.chat.models :as models.chat]
             [status-im.multiaccounts.core :as multiaccounts]))
 
-(defn unwrap-events
-  "Flatten all events, denormalizing from field"
-  [all-updates]
-  (mapcat
-   (fn [{:keys [events from]}]
-     (map #(assoc % :from from) events))
-   all-updates))
+(def members-added-type 3)
 
 (defn joined?
   [public-key {:keys [members-joined] :as chat}]
@@ -19,14 +13,14 @@
   (contains? contacts my-public-key))
 
 (defn get-inviter-pk
-  [my-public-key {:keys [membership-updates]}]
-  (->> membership-updates
-       unwrap-events
+  [my-public-key {:keys [membership-update-events]}]
+  (->> membership-update-events
+       reverse
        (keep (fn [{:keys [from type members]}]
-               (when (and (= type "members-added")
+               (when (and (= type members-added-type)
                           ((set members) my-public-key))
                  from)))
-       last))
+       first))
 
 (defn get-pending-invite-inviter-name
   "when the chat is a private group chat in which the user has been

src/status_im/subs.cljs

@@ -729,7 +729,8 @@
 
        (and (chat.models/group-chat? current-chat)
             (group-chats.db/joined? my-public-key current-chat))
-       (assoc :show-input? true)
+       (assoc :show-input? true
+              :joined? true)
 
        (not group-chat)
        (assoc :show-input? true)))))
@@ -893,6 +894,15 @@
  (fn [[selected-contacts active-contacts]]
    (filter-contacts selected-contacts active-contacts)))
 
+(re-frame/reg-sub
+ :group-chat/chat-joined?
+ :<- [:multiaccount/public-key]
+ :<- [:chats/active-chats]
+ (fn [[my-public-key chats] [_ chat-id]]
+   (let [current-chat (get chats chat-id)]
+     (and (chat.models/group-chat? current-chat)
+          (group-chats.db/joined? my-public-key current-chat)))))
+
 (re-frame/reg-sub
  :chats/transaction-status
  ;;TODO address here for transactions
@@ -1692,8 +1702,7 @@
  :<- [:contacts/contacts]
  :<- [:multiaccount]
  (fn [[{:keys [contacts admins]} all-contacts current-multiaccount]]
-   (map #(assoc % :name (multiaccounts/displayed-name %))
-        (contact.db/get-all-contacts-in-group-chat contacts admins all-contacts current-multiaccount))))
+   (contact.db/get-all-contacts-in-group-chat contacts admins all-contacts current-multiaccount)))
 
 (re-frame/reg-sub
  :contacts/contacts-by-chat

src/status_im/ui/components/button.cljs

@@ -51,7 +51,8 @@
 
   Spec: https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=858%3A0"
 
-  [{:keys [label type theme disabled? on-press accessibility-label style container-style] :or {type :main theme :blue}}]
+  [{:keys [label type theme disabled? on-press accessibility-label style container-style text-style]
+    :or   {type :main theme :blue}}]
   (let [label (utils.label/stringify label)]
     [react/touchable-opacity (cond-> {:on-press on-press
                                       :active-opacity 0.5
@@ -65,18 +66,19 @@
       [react/view {:flex-direction :row :align-items :center}
        (when (= type :previous)
          [vector-icons/icon :main-icons/back {:container-style {:width 24 :height 24 :margin-right 4}
-                                              :color (if disabled? colors/gray colors/blue)}])
-       [react/text {:style {:color (cond
-                                     disabled?
-                                     colors/gray
-                                     (#{:main :secondary :next :previous} type)
-                                     (case theme
-                                       :green colors/green
-                                       :red colors/red
-                                       colors/blue)
-                                     :else
-                                     "")}}
+                                              :color           (if disabled? colors/gray colors/blue)}])
+       [react/text {:style (merge {:color (cond
+                                            disabled?
+                                            colors/gray
+                                            (#{:main :secondary :next :previous} type)
+                                            (case theme
+                                              :green colors/green
+                                              :red   colors/red
+                                              colors/blue)
+                                            :else
+                                            "")}
+                                  text-style)}
         label]
        (when (= type :next)
          [vector-icons/icon :main-icons/next {:container-style {:width 24 :height 24 :margin-left 4}
-                                              :color (if disabled? colors/gray colors/blue)}])]]]))
+                                              :color           (if disabled? colors/gray colors/blue)}])]]]))

src/status_im/ui/components/chat_icon/screen.cljs

@@ -27,7 +27,7 @@
 
 (defn default-browser-icon [name]
   (default-chat-icon name {:default-chat-icon (styles/default-chat-icon-chat-list colors/default-chat-color)
-                           :default-chat-icon-text styles/default-chat-icon-text}))
+                           :default-chat-icon-text (styles/default-chat-icon-text 40)}))
 
 (defn dapp-badge [{:keys [online-view-wrapper online-view online-dot-left online-dot-right]}]
   [react/view online-view-wrapper
@@ -54,7 +54,7 @@
     :size                   36
     :chat-icon              styles/chat-icon-chat-toolbar
     :default-chat-icon      (styles/default-chat-icon-chat-toolbar color)
-    :default-chat-icon-text styles/default-chat-icon-text}])
+    :default-chat-icon-text (styles/default-chat-icon-text 36)}])
 
 (defn chat-icon-view-chat-list
   [contact group-chat name color online]
@@ -67,7 +67,7 @@
     :size                   40
     :chat-icon              styles/chat-icon-chat-list
     :default-chat-icon      (styles/default-chat-icon-chat-list color)
-    :default-chat-icon-text styles/default-chat-icon-text}])
+    :default-chat-icon-text (styles/default-chat-icon-text 40)}])
 
 (defn chat-icon-view-chat-sheet
   [contact group-chat name color online]
@@ -80,13 +80,13 @@
     :size                   40
     :chat-icon              styles/chat-icon-chat-list
     :default-chat-icon      (styles/default-chat-icon-chat-list color)
-    :default-chat-icon-text styles/default-chat-icon-text}])
+    :default-chat-icon-text (styles/default-chat-icon-text 40)}])
 
 (defn custom-icon-view-list
   [name color & [size]]
   [react/view (styles/container-list-size (or size 40))
    [default-chat-icon name {:default-chat-icon      (styles/default-chat-icon-profile color (or size 40))
-                            :default-chat-icon-text styles/default-chat-icon-text}]])
+                            :default-chat-icon-text (styles/default-chat-icon-text (or size 40))}]])
 
 (defn contact-icon-view
   [{:keys [name dapp?] :as contact} {:keys [container] :as styles}]
@@ -107,7 +107,7 @@
     :size                   60
     :chat-icon              styles/chat-icon-chat-list
     :default-chat-icon      (styles/default-chat-icon-chat-list colors/default-chat-color)
-    :default-chat-icon-text styles/default-chat-icon-text}])
+    :default-chat-icon-text (styles/default-chat-icon-text 60)}])
 
 (defn contact-icon-contacts-tab [contact]
   [contact-icon-view contact
@@ -119,7 +119,7 @@
     :size                   40
     :chat-icon              styles/chat-icon-chat-list
     :default-chat-icon      (styles/default-chat-icon-chat-list colors/default-chat-color)
-    :default-chat-icon-text styles/default-chat-icon-text}])
+    :default-chat-icon-text (styles/default-chat-icon-text 40)}])
 
 (defn dapp-icon-browser [contact size]
   [contact-icon-view contact
@@ -128,7 +128,7 @@
     :size                   size
     :chat-icon              (styles/custom-size-icon size)
     :default-chat-icon      (styles/default-chat-icon-chat-list colors/default-chat-color)
-    :default-chat-icon-text styles/default-chat-icon-text}])
+    :default-chat-icon-text (styles/default-chat-icon-text size)}])
 
 (defn dapp-icon-permission [contact size]
   [contact-icon-view contact
@@ -140,7 +140,7 @@
     :size                   size
     :chat-icon              (styles/custom-size-icon size)
     :default-chat-icon      (styles/default-chat-icon-profile colors/default-chat-color size)
-    :default-chat-icon-text styles/default-chat-icon-text}])
+    :default-chat-icon-text (styles/default-chat-icon-text size)}])
 
 (defn chat-intro-icon-view [icon-text chat-id styles]
   (let [photo-path (re-frame.core/subscribe [:contacts/chat-photo chat-id])]
@@ -156,7 +156,7 @@
                        :size                   size
                        :chat-icon              styles/chat-icon-profile
                        :default-chat-icon      (styles/default-chat-icon-profile color size)
-                       :default-chat-icon-text styles/default-chat-icon-text} override-styles)]
+                       :default-chat-icon-text (styles/default-chat-icon-text size)} override-styles)]
     [react/view (:container styles)
      (when (and edit? (not platform/desktop?))
        [react/view (styles/profile-icon-mask size)])

src/status_im/ui/components/chat_icon/styles.cljs

@@ -40,10 +40,11 @@
           :height        64
           :border-radius 32}))
 
-(def default-chat-icon-text
+(defn default-chat-icon-text [size]
   {:color       (colors/alpha colors/white 0.7)
-   :typography  :title-bold
-   :line-height 21})
+   :font-weight "700"
+   :font-size   (/ size 2)
+   :line-height size})
 
 (def message-status-icon-text
   {:margin-top -2