Text for empty chat

Signed-off-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>

resources/icons/lock.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#6E777E" d="M5,8 L5,6.25641026 C5,4.47325715 6.32593143,3 8,3 C9.67406857,3 11,4.47325715 11,6.25641026 L11,8 L11.5,8 C12.3284271,8 13,8.67157288 13,9.5 L13,12.5 C13,13.3284271 12.3284271,14 11.5,14 L4.5,14 C3.67157288,14 3,13.3284271 3,12.5 L3,9.5 C3,8.67157288 3.67157288,8 4.5,8 L5,8 Z M6.38461538,8 L9.61538462,8 L9.61538462,6.25641026 C9.61538462,5.20733388 8.87493797,4.38461538 8,4.38461538 C7.12506203,4.38461538 6.38461538,5.20733388 6.38461538,6.25641026 L6.38461538,8 Z" id="shape"></path>
+</svg>

src/status_im/chat/screen.cljs

@@ -4,6 +4,7 @@
             [re-frame.core :as re-frame]
             [status-im.constants :as constants]
             [status-im.i18n :as i18n]
+            [status-im.chat.models :as models.chat]
             [status-im.chat.styles.screen :as style]
             [status-im.utils.platform :as platform]
             [status-im.chat.views.toolbar-content :as toolbar-content]
@@ -38,7 +39,7 @@
 
 (defview add-contact-bar [contact-identity]
   (letsubs [{:keys [pending?] :as contact} [:get-contact-by-identity contact-identity]]
-    (when (or pending? (not contact)) ;; contact is pending or not in contact list at all
+    (when (or pending? (nil? pending?)) ;; contact is pending or not in contact list at all
       [react/touchable-highlight
        {:on-press            #(re-frame/dispatch [:add-contact contact-identity])
         :accessibility-label :add-to-contacts-button}
@@ -99,18 +100,34 @@
       [react/animated-view {:style (style/message-view-animated opacity)}
        message-view]]]))
 
+(defview empty-chat-container [{:keys [group-chat chat-id]}]
+  (letsubs [contact [:get-contact-by-identity chat-id]]
+    (let [one-to-one (and (not group-chat)
+                          (not (:dapp? contact)))]
+      [react/view style/empty-chat-container
+       (when one-to-one
+         [vector-icons/icon :icons/lock])
+       [react/text {:style style/empty-chat-text}
+        (cond
+          (= chat-id constants/console-chat-id)
+          (i18n/label :t/empty-chat-description-console)
+
+          one-to-one
+          [react/text style/empty-chat-container-one-to-one
+           (i18n/label :t/empty-chat-description-one-to-one)
+           [react/text {:style style/empty-chat-text-name} (:name contact)]]
+
+          :else
+          (i18n/label :t/empty-chat-description))]])))
+
 (defview messages-view [group-chat]
   (letsubs [messages           [:get-current-chat-messages-stream]
-            chat-id            [:get-current-chat-id]
+            chat               [:get-current-chat]
             current-public-key [:get-current-public-key]]
     {:component-did-mount #(re-frame/dispatch [:set-chat-ui-props {:messages-focused? true
                                                                    :input-focused? false}])}
     (if (empty? messages)
-      [react/view style/empty-chat-container
+      [empty-chat-container chat]
-       [react/text {:style style/empty-chat-text}
-        (if (= chat-id constants/console-chat-id)
-          (i18n/label :t/empty-chat-description-console)
-          (i18n/label :t/empty-chat-description))]]
       [list/flat-list {:data                      messages
                        :key-fn                    #(or (:message-id %) (:value %))
                        :render-fn                 (fn [message]

src/status_im/chat/styles/screen.cljs

@@ -209,9 +209,12 @@
   {:opacity opacity
    :flex    1})
 
+(def empty-chat-container-one-to-one
+  {:margin-top 10})
+
 (def empty-chat-container
   {:flex             1
-   :flex-direction   :row
+   :flex-direction   :column
    :justify-content  :center
    :align-items      :center
    :padding-vertical 50
@@ -219,7 +222,11 @@
 
 (def empty-chat-text
   {:color          colors/gray
-   :font-size      14
+   :width          280
-   :line-height    20
+   :font-size      15
+   :line-height    22
    :letter-spacing -0.2
    :text-align     :center})
+
+(def empty-chat-text-name
+  {:color colors/black})

src/status_im/translations/en.cljs

@@ -242,6 +242,7 @@
    :set-a-topic                          "Set a topic"
    :empty-chat-description               "There are no messages \nin this chat yet"
    :empty-chat-description-console       "Look under the hood! Console is a javascript runtime environment that exposes the whole web3 API. Type \"web3.\" to get started."
+   :empty-chat-description-one-to-one    "Any messages you send here are encrypted and can only be read by you and "
    :counter-99-plus                      "99+"
    :show-more                            "Show more"
    :show-less                            "Show less"

src/status_im/ui/components/icons/vector_icons.cljs

@@ -61,6 +61,7 @@
             :icons/hamburger           (components.svg/slurp-svg "./resources/icons/hamburger.svg")
             :icons/hidden              (components.svg/slurp-svg "./resources/icons/hidden.svg")
             :icons/in-contacts         (components.svg/slurp-svg "./resources/icons/in_contacts.svg")
+            :icons/lock                (components.svg/slurp-svg "./resources/icons/lock.svg")
             :icons/mic                 (components.svg/slurp-svg "./resources/icons/mic.svg")
             :icons/ok                  (components.svg/slurp-svg "./resources/icons/ok.svg")
             :icons/public              (components.svg/slurp-svg "./resources/icons/public.svg")

src/status_im/ui/screens/contacts/subs.cljs

@@ -64,7 +64,9 @@
 (reg-sub :get-contact-by-identity
          :<- [:get-contacts]
          (fn [contacts [_ identity]]
-           (get contacts identity)))
+           (or
+            (get contacts identity)
+            (utils.contacts/whisper-id->new-contact identity))))
 
 (reg-sub :get-dapp-by-name
          :<- [:get-dapps]