[#5321] fix command message rendering

Signed-off-by: Dmitry Novotochinov <dmitry.novot@gmail.com>

src/status_im/chat/commands/impl/transactions.cljs

@@ -20,6 +20,7 @@
             [status-im.utils.datetime :as datetime]
             [status-im.utils.fx :as fx]
             [status-im.utils.money :as money]
+            [status-im.utils.platform :as platform]
             [status-im.ui.screens.wallet.db :as wallet.db]
             [status-im.ui.screens.wallet.choose-recipient.events :as choose-recipient.events]
             [status-im.ui.screens.currency-settings.subs :as currency-settings.subs]
@@ -217,7 +218,8 @@
            [react/text {:style (transactions-styles/command-send-currency-text outgoing)
                         :font  :default}
             asset]]]]
-        (when fiat-amount
+        (when (and fiat-amount
+                   platform/mobile?)
           [react/view transactions-styles/command-send-fiat-amount
            [react/text {:style transactions-styles/command-send-fiat-amount-text}
             (str "~ " fiat-amount " " (or currency (i18n/label :usd-currency)))]])
@@ -228,7 +230,8 @@
         [react/view
          [react/text {:style (transactions-styles/command-send-timestamp outgoing)}
           (str (i18n/label :sent-at) " " timestamp-str)]]
-        [send-status tx-hash outgoing]
+        (when platform/mobile?
+          [send-status tx-hash outgoing])
         (when network-mismatch?
           [react/text send-network])]])))
 
@@ -401,9 +404,10 @@
                                [react/text {:style (transactions-styles/command-request-currency-text outgoing)
                                             :font  :default}
                                 asset]]]
-                             [react/view transactions-styles/command-request-fiat-amount-row
+                             (when platform/mobile?
-                              [react/text {:style transactions-styles/command-request-fiat-amount-text}
+                               [react/view transactions-styles/command-request-fiat-amount-row
-                               (str "~ " fiat-amount " " (or currency (i18n/label :usd-currency)))]]
+                                [react/text {:style transactions-styles/command-request-fiat-amount-text}
+                                 (str "~ " fiat-amount " " (or currency (i18n/label :usd-currency)))]])
                              (when network-mismatch?
                                [react/text {:style transactions-styles/command-request-network-text}
                                 (str (i18n/label :on) " " request-network)])
@@ -415,7 +419,8 @@
                                 (i18n/label :at)
                                 " "
                                 timestamp-str)]]
-                             (when-not outgoing
+                             (when (and (not outgoing)
+                                        platform/mobile?)
                                [react/view
                                 [react/view transactions-styles/command-request-separator-line]
                                 [react/view transactions-styles/command-request-button

src/status_im/ui/screens/desktop/main/chat/styles.cljs

@@ -44,6 +44,15 @@
           :bottom   0
           :right    -5}))
 
+(def message-command-container
+  {:align-self         :flex-start
+   :border-radius      8
+   :padding-horizontal 12
+   :padding-vertical   10
+   :background-color   colors/white
+   :align-items        :flex-start
+   :width              230})
+
 (def author
   {:color         colors/gray
    :font-size     12

src/status_im/ui/screens/desktop/main/chat/views.cljs

@@ -120,8 +120,17 @@
        [photo-placeholder])
      [message-with-timestamp text message (styles/message-box message)]]]])
 
-(defn message [text me? {:keys [message-id chat-id message-status user-statuses from
+(defmulti message (fn [_ _ {:keys [content-type]}] content-type))
-                                current-public-key content-type group-chat outgoing type value] :as message}]
+
+(defmethod message constants/content-type-command
+  [_ _ message]
+  [react/view {:style (styles/message-row message)}
+   [react/view {:style styles/message-command-container}
+    [message/message-content-command message]]])
+
+(defmethod message :default
+  [text me? {:keys [message-id chat-id message-status user-statuses from
+                    current-public-key content-type group-chat outgoing type value] :as message}]
   (when (nil? message-id)
     (log/debug "nil?" message))
   (if (= type :datemark)

src/status_im/ui/screens/desktop/main/tabs/home/views.cljs

@@ -9,7 +9,8 @@
             [status-im.ui.screens.home.views.inner-item :as chat-item]
             [taoensso.timbre :as log]
             [status-im.ui.components.icons.vector-icons :as icons]
-            [status-im.ui.components.react :as react]))
+            [status-im.ui.components.react :as react]
+            [status-im.constants :as constants]))
 
 (views/defview unviewed-indicator [chat-id]
   (let [unviewed-messages-count (re-frame/subscribe [:unviewed-messages-count chat-id])]
@@ -54,7 +55,9 @@
         [react/text {:ellipsize-mode  :tail
                      :number-of-lines 1
                      :style           styles/chat-last-message}
-         (or (:content last-message) (i18n/label :no-messages-yet))]]
+         (if (= constants/content-type-command (:content-type last-message))
+           [chat-item/command-short-preview last-message]
+           (or (:content last-message) (i18n/label :no-messages-yet)))]]
        [react/view {:style styles/timestamp}
         [chat-item/message-timestamp (:timestamp last-message)]]])))