send command styling

ios/StatusIm.xcodeproj/project.pbxproj

@@ -45,6 +45,7 @@
 		82E689BAF9FB43C8AC6FF1CA /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CEB0E2659D1A4F5FA842057A /* EvilIcons.ttf */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
 		8E55E6877F950B81C8D711C5 /* libPods-StatusIm.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 101A4045637A2ADF57D28EF5 /* libPods-StatusIm.a */; };
+		9E0B01A11DDC5DA7002B0359 /* SF-UI-Text-Light.otf in Resources */ = {isa = PBXBuildFile; fileRef = 9E0B01A01DDC5DA7002B0359 /* SF-UI-Text-Light.otf */; };
 		9E3AB6D01D87DB2B008846B4 /* libReact-Native-Webview-Bridge.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 9E3AB6C61D87DA2B008846B4 /* libReact-Native-Webview-Bridge.a */; };
 		9ED2F45E1D9D535A00B36508 /* SF-UI-Text-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = 9ED2F45D1D9D52DD00B36508 /* SF-UI-Text-Regular.otf */; };
 		9ED2F45F1D9D535A00B36508 /* SF-UI-Text-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = 9ED2F45C1D9D52C100B36508 /* SF-UI-Text-Medium.otf */; };
@@ -444,6 +445,7 @@
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
 		8AE71EE8751F4652B13BFE83 /* RNVectorIcons.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNVectorIcons.xcodeproj; path = "../node_modules/react-native-vector-icons/RNVectorIcons.xcodeproj"; sourceTree = "<group>"; };
 		8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libc++.tbd"; path = "usr/lib/libc++.tbd"; sourceTree = SDKROOT; };
+		9E0B01A01DDC5DA7002B0359 /* SF-UI-Text-Light.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "SF-UI-Text-Light.otf"; sourceTree = "<group>"; };
 		9E3AB6B21D87DA2A008846B4 /* React-Native-Webview-Bridge.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = "React-Native-Webview-Bridge.xcodeproj"; path = "../node_modules/react-native-webview-bridge/ios/React-Native-Webview-Bridge.xcodeproj"; sourceTree = "<group>"; };
 		9ED2F45C1D9D52C100B36508 /* SF-UI-Text-Medium.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "SF-UI-Text-Medium.otf"; sourceTree = "<group>"; };
 		9ED2F45D1D9D52DD00B36508 /* SF-UI-Text-Regular.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "SF-UI-Text-Regular.otf"; sourceTree = "<group>"; };
@@ -659,6 +661,7 @@
 			isa = PBXGroup;
 			children = (
 				9ED2F4601D9D577B00B36508 /* SF-UI-Text-Bold.otf */,
+				9E0B01A01DDC5DA7002B0359 /* SF-UI-Text-Light.otf */,
 				9ED2F45D1D9D52DD00B36508 /* SF-UI-Text-Regular.otf */,
 				9ED2F45C1D9D52C100B36508 /* SF-UI-Text-Medium.otf */,
 				2028DFF51D4275B600227DCD /* SF-UI-Display-Medium.otf */,
@@ -1380,6 +1383,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				9ED2F4611D9D579900B36508 /* SF-UI-Text-Bold.otf in Resources */,
+				9E0B01A11DDC5DA7002B0359 /* SF-UI-Text-Light.otf in Resources */,
 				9ED2F45E1D9D535A00B36508 /* SF-UI-Text-Regular.otf in Resources */,
 				9ED2F45F1D9D535A00B36508 /* SF-UI-Text-Medium.otf in Resources */,
 				2028DFFA1D4275B600227DCD /* SF-UI-Display-Regular.otf in Resources */,

ios/StatusIm/Info.plist

@@ -53,6 +53,7 @@
 		<string>SF-UI-Text-Bold.otf</string>
 		<string>SF-UI-Text-Regular.otf</string>
 		<string>SF-UI-Text-Medium.otf</string>
+		<string>SF-UI-Text-Light.otf</string>
 		<string>SF-UI-Display-Medium.otf</string>
 		<string>SF-UI-Display-Regular.otf</string>
 		<string>SF-UI-Display-Semibold.otf</string>

resources/commands.js

@@ -139,10 +139,63 @@ var send = {
         name: "amount",
         type: status.types.NUMBER
     }],
-    preview: function (params) {
+    preview: function (params, context) {
-        return status.components.text(
+        var amountStyle = {
-            {},
+            fontSize: 36,
-            params.amount + " ETH"
+            color: "#000000"
+        };
+
+        var isIos = context.platform == "ios";
+        if (isIos) {
+            amountStyle.height = 36;
+        } else {
+            amountStyle.lineHeight = 34;
+        }
+
+        var amount = status.components.view(
+            {
+                flexDirection: "row",
+                alignItems: "flex-end"
+            },
+            [status.components.text(
+                {
+                    style: amountStyle,
+                    font: "light"
+                },
+                params.amount
+            )]);
+
+        var currency = status.components.view(
+            {
+                style: {
+                    flexDirection: "column",
+                    justifyContent: "flex-end",
+                    paddingBottom: 0
+                }
+            },
+            [status.components.text(
+                {
+                    style: {
+                        color: "#9199a0",
+                        fontSize: 16,
+                        lineHeight: 18,
+                        marginLeft: 7.5
+                    }
+                },
+                "ETH"
+            )]
+        );
+
+        return status.components.view(
+            {
+                style: {
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    marginTop: 8,
+                    marginBottom: 8
+                }
+            },
+            [amount, currency]
         );
     },
     handler: sendTransaction,

src/status_im/android/platform.cljs

@@ -47,7 +47,8 @@
                            :font-size        12}})
 
 (def fonts
-  {:default       {:font-family "sans-serif"}
+  {:light         {:font-family "sans-serif-light"}
+   :default       {:font-family "sans-serif"}
    :medium        {:font-family "sans-serif-medium"}
 
    :toolbar-title {:font-family "sans-serif"}})

src/status_im/chat/handlers/receive_message.cljs

@@ -6,7 +6,8 @@
             [status-im.commands.utils :refer [generate-hiccup]]
             [status-im.utils.random :as random]
             [status-im.constants :refer [wallet-chat-id
-                                         content-type-command-request]]
+                                         content-type-command-request]
+             :as c]
             [cljs.reader :refer [read-string]]
             [status-im.data-store.chats :as chats]
             [taoensso.timbre :as log]
@@ -64,10 +65,14 @@
                (= "send" (get-in message [:content :command])))
         (add-message-to-wallet db message)))))
 
-(defn add-message-to-wallet [db message]
+(defn add-message-to-wallet [db {:keys [content-type] :as message}]
-  (let [message' (assoc message :clock-value 0
+  (let [ct       (if (= content-type c/content-type-command)
+                   c/content-type-wallet-command
+                   c/content-type-wallet-request)
+        message' (assoc message :clock-value 0
                                 :message-id (random/id)
-                                :chat-id wallet-chat-id)]
+                                :chat-id wallet-chat-id
+                                :content-type ct)]
     (add-message db message')))
 
 (register-handler :received-protocol-message!

src/status_im/chat/handlers/send_message.cljs

@@ -11,7 +11,7 @@
             [status-im.constants :refer [text-content-type
                                          content-type-command
                                          content-type-command-request
-                                         default-number-of-messages]]
+                                         default-number-of-messages] :as c]
             [status-im.utils.datetime :as datetime]
             [status-im.protocol.core :as protocol]
             [taoensso.timbre :refer-macros [debug] :as log]
@@ -20,7 +20,8 @@
 
 (defn prepare-command
   [identity chat-id clock-value request
-   {:keys [id preview preview-string params command to-message handler-data]}]
+   {:keys [id preview preview-string params command
+           to-message handler-data content-type]}]
   (let [content (or request {:command (command :name)
                              :params  params})]
     {:message-id       id
@@ -30,9 +31,10 @@
      :content          (assoc content :preview preview-string
                                       :handler-data handler-data
                                       :type (name (:type command)))
-     :content-type     (if request
+     :content-type     (or content-type
-                         content-type-command-request
+                           (if request
-                         content-type-command)
+                             content-type-command-request
+                             content-type-command))
      :outgoing         true
      :preview          preview-string
      :rendered-preview preview
@@ -104,7 +106,11 @@
 
         (when (and (= "send" (get-in staged-command [:command :name]))
                    (not= add-to-chat-id wallet-chat-id))
-          (let [staged-command' (assoc staged-command :id (random/id))
+          (let [ct              (if request
+                                  c/content-type-wallet-request
+                                  c/content-type-wallet-command)
+                staged-command' (assoc staged-command :id (random/id)
+                                                      :content-type ct)
                 params'         (assoc params :staged-command staged-command')]
             (dispatch [:prepare-command! wallet-chat-id params'])))))))
 

src/status_im/chat/styles/command_pill.cljs

@@ -5,7 +5,6 @@
 (defn pill [command]
   {:backgroundColor   (:color command)
    :height            24
-   :min-width         120
    :borderRadius      50
    :padding-top       (if p/ios? 4 3)
    :paddingHorizontal 12

src/status_im/chat/styles/input.cljs

@@ -89,12 +89,16 @@
   {:flexDirection   :column
    :margin-top      16
    :margin-left     16
-   :margin-right    16
+   :margin-right    0
    :padding-bottom  12
    :padding-left    12
    :backgroundColor chat-background
    :borderRadius    14})
 
+(def staged-command-header
+  {:flex-direction :row
+   :justify-content :space-between})
+
 (def staged-command-info-container
   {:flexDirection :row
    :margin-top    12})
@@ -115,5 +119,5 @@
    :color            color-black})
 
 (def staged-commands-bottom
-  {:height 16
+  {:height           16
    :background-color "white"})

src/status_im/chat/views/message.cljs

@@ -25,7 +25,7 @@
                                          text-content-type
                                          content-type-status
                                          content-type-command
-                                         content-type-command-request]]
+                                         content-type-command-request] :as c]
             [status-im.components.chat-icon.screen :refer [chat-icon-message-status]]
             [status-im.utils.identicon :refer [identicon]]
             [status-im.utils.gfycat.core :refer [generate-gfy]]
@@ -77,9 +77,7 @@
            :font  :default}
      "03:39"]]])
 
-(defmulti command-preview (fn [{:keys [command]}] command))
+(defn wallet-command-preview
-
-(defmethod command-preview "send"
   [{{:keys [name]} :contact-chat
     :keys          [contact-address params outgoing? current-chat-id]}]
   (let [amount (if (= 1 (count params))
@@ -93,21 +91,30 @@
                            :chat-name (or name contact-address)}))
        (label :t/chat-send-eth {:amount amount}))]))
 
-(defmethod command-preview :default
+(defn wallet-command? [content-type]
-  [{:keys [params preview]}]
+  (#{c/content-type-wallet-command c/content-type-wallet-request} content-type))
-  (if preview
+
-    preview
+(defn command-preview
+  [{:keys [params preview content-type] :as message}]
+  (cond
+    (wallet-command? content-type)
+    (wallet-command-preview message)
+
+    preview preview
+
+    :else
     [text {:style st/command-text
            :font  :default}
      (if (= 1 (count params))
        (first (vals params))
        (str params))]))
 
-(defview message-content-command [{:keys [content rendered-preview chat-id to from outgoing] :as message}]
+(defview message-content-command
+  [{:keys [content content-type rendered-preview chat-id to from outgoing] :as message}]
   [commands [(if (= (:type content) "response")
                :get-responses
                :get-commands)
-             (if outgoing to from)]
+             chat-id]
    current-chat-id [:get-current-chat-id]
    contact-chat [:get-in [:chats (if outgoing to from)]]]
   (let [{:keys [command params]} (parse-command-message-content commands content)
@@ -123,6 +130,7 @@
        [view st/command-image-view
         [icon icon-path st/command-image]])
      [command-preview {:command         (:name command)
+                       :content-type    content-type
                        :params          params
                        :outgoing?       outgoing
                        :preview         rendered-preview
@@ -145,6 +153,10 @@
   [wrapper message]
   [wrapper message [message-content-command-request message]])
 
+(defmethod message-content c/content-type-wallet-request
+  [wrapper message]
+  [wrapper message [message-content-command-request message]])
+
 (def replacements
   {"\\*[^*]+\\*" {:font-weight :bold}
    "~[^~]+~"     {:font-style :italic}})
@@ -164,22 +176,22 @@
 ;; todo rewrite this, naive implementation
 (defn- parse-text [string]
   (if (string? string)
-    (let [general-text (s/split string regx)
+    (let [general-text  (s/split string regx)
           general-text' (if (zero? (count general-text))
                           [nil]
                           general-text)
-          styled-text  (vec (map-indexed
+          styled-text   (vec (map-indexed
-                              (fn [idx string]
+                               (fn [idx string]
-                                (let [style (get-style string)]
+                                 (let [style (get-style string)]
-                                  [text
+                                   [text
-                                   {:key   (str idx "_" string)
+                                    {:key   (str idx "_" string)
-                                    :style style}
+                                     :style style}
-                                   (subs string 1 (- (count string) 1))]))
+                                    (subs string 1 (- (count string) 1))]))
-                              (re-seq regx string)))
+                               (re-seq regx string)))
-          styled-text' (if (> (count general-text)
+          styled-text'  (if (> (count general-text)
-                              (count styled-text))
+                               (count styled-text))
-                         (conj styled-text nil)
+                          (conj styled-text nil)
-                         styled-text)]
+                          styled-text)]
       (mapcat vector general-text' styled-text'))
     (str string)))
 
@@ -203,6 +215,11 @@
   [wrapper message
    [message-view message [message-content-command message]]])
 
+(defmethod message-content c/content-type-wallet-command
+  [wrapper message]
+  [wrapper message
+   [message-view message [message-content-command message]]])
+
 (defmethod message-content :default
   [wrapper {:keys [content-type content] :as message}]
   [wrapper message

src/status_im/chat/views/staged_commands.cljs

@@ -23,7 +23,7 @@
   (let [{:keys [type name]} command]
     [view st/staged-command-container
      [view st/staged-command-background
-      [view {:flex-direction :row}
+      [view st/staged-command-header
        [view st/staged-command-info-container
         [view (pill-st/pill command)
          [text {:style pill-st/pill-text}
@@ -34,12 +34,13 @@
                              :onPress #(cancel-command-input staged-command)}
         [view [icon :close_small_gray
           st/staged-command-cancel-icon]]]]
-      (if-let [preview (:preview staged-command)]
+      [view {:padding-right 12}
-        preview
+       (if-let [preview (:preview staged-command)]
-        [text {:style st/staged-command-content}
+         preview
-         (if (= 1 (count params))
+         [text {:style st/staged-command-content}
-           (first (vals params))
+          (if (= 1 (count params))
-           (str params))])]]))
+            (first (vals params))
+            (str params))])]]]))
 
 (defn staged-command-view [stage-command]
   [simple-command-staged-view stage-command])
@@ -57,4 +58,4 @@
       [view {:on-layout #(dispatch [:staged-commands-scroll-to (get-height %)])}
        (for [command staged-commands]
          ^{:key command} [staged-command-view command])
-       [view st/staged-commands-bottom]]]]))
+       [view st/staged-commands-bottom]]]]))

src/status_im/chats_list/views/inner_item.cljs

@@ -12,16 +12,24 @@
             [status-im.utils.gfycat.core :refer [generate-gfy]]
             [status-im.constants :refer [console-chat-id
                                          content-type-command
-                                         content-type-command-request]]
+                                         content-type-command-request] :as c]
             [taoensso.timbre :as log]))
 
 (defmulti message-content (fn [{:keys [content-type] :as message}] content-type))
 
-(defmethod message-content content-type-command
+(defn command-content
   [{{:keys [command params]} :content}]
   (let [kw (keyword (str "t/command-text-" (name command)))]
     (label kw params)))
 
+(defmethod message-content content-type-command
+  [message]
+  (command-content message))
+
+(defmethod message-content c/content-type-wallet-command
+  [message]
+  (command-content message))
+
 (defmethod message-content content-type-command-request
   [{{:keys [content]} :content}]
   content)

src/status_im/components/react.cljs

@@ -57,7 +57,7 @@
   ([{:keys [style font uppercase?] :as opts
      :or   {font :default}} t & ts]
    (r/as-element
-     (let [font (get-in platform-specific [:fonts font])
+     (let [font (get-in platform-specific [:fonts (keyword font)])
            ts   (cond->> (conj ts t)
                          uppercase? (map clojure.string/upper-case))]
        (vec (concat

src/status_im/components/status.cljs

@@ -51,8 +51,12 @@
 
 (when status (call-module init-jail))
 
-(.addListener r/device-event-emitter "gethEvent"
+(defonce listener-initialized (atom false))
-              #(dispatch [:signal-event (.-jsonEvent %)]))
+
+(when-not @listener-initialized
+  (reset! listener-initialized true)
+  (.addListener r/device-event-emitter "gethEvent"
+                #(dispatch [:signal-event (.-jsonEvent %)])))
 
 (defn start-node [on-result]
   (when status

src/status_im/constants.cljs

@@ -9,6 +9,8 @@
 (def text-content-type "text/plain")
 (def content-type-command "command")
 (def content-type-command-request "command-request")
+(def content-type-wallet-command "wallet-command")
+(def content-type-wallet-request "wallet-request")
 (def content-type-status "status")
 
 (def max-chat-name-length 20)
@@ -22,4 +24,4 @@
 (def default-number-of-discovery-search-results 20)
 
 (def console-chat-id "console")
-(def wallet-chat-id "wallet")
+(def wallet-chat-id "wallet")

src/status_im/data_store/messages.cljs

@@ -32,7 +32,8 @@
 (defn- command-type?
   [type]
   (contains?
-    #{c/content-type-command c/content-type-command-request}
+    #{c/content-type-command c/content-type-command-request
+      c/content-type-wallet-request c/content-type-wallet-command}
     type))
 
 (def default-values

src/status_im/ios/platform.cljs

@@ -55,7 +55,8 @@
                            :font-size        14}})
 
 (def fonts
-  {:default       {:font-family "SFUIText-Regular"}
+  {:light         {:font-family "SFUIText-Light"}
+   :default       {:font-family "SFUIText-Regular"}
    :medium        {:font-family "SFUIText-Medium"}
    :bold          {:font-family "SFUIText-Bold"}
 

src/status_im/models/commands.cljs

@@ -97,7 +97,9 @@
                                            (get-chat-command-to-message-id db))))
 
 (defn parse-command-message-content [commands content]
-  (update content :command #((keyword %) commands)))
+  (if (map? content)
+    (update content :command #((keyword %) commands))
+    content))
 
 (defn parse-command-request [commands content]
   (update content :command #((keyword %) commands)))

src/status_im/transactions/handlers.cljs

@@ -79,8 +79,8 @@
         (update :transactions-queue #(apply dissoc % hashes)))))
 
 (register-handler ::remove-transaction
-  (after (fn [{:keys [transactions]}]
+  (after (fn [{:keys [transactions modal]}]
-           (when-not (seq transactions)
+           (when-not (and (:confirm modal) (seq transactions))
              (dispatch [:navigate-back]))))
   (fn [db [_ hash]]
     (-> db
@@ -152,8 +152,7 @@
                                                     :hash       hash
                                                     :message-id message-id}])
                 (dispatch [::check-completed-transaction!
-                           {:message-id message-id}])
+                           {:message-id message-id}]))
-                (dispatch [:navigate-back]))
             (dispatch [::remove-transaction id])))))))
 
 (register-handler ::add-transactions-hash

src/status_im/utils/js_resources.cljs

@@ -4,5 +4,5 @@
 (def commands-js (slurp "resources/commands.js"))
 (def console-js (slurp "resources/console.js"))
 (def status-js (slurp "resources/status.js"))
-(def wallet-js (slurp "resources/wallet.js"))
+(def wallet-js (str commands-js (slurp "resources/wallet.js")))
 (def webview-js (slurp "resources/webview.js"))