[ref #2764] Add offline messaging settings screen

Screen shows what whisper node we connected to. No adding/editing
allowed yet, screen is ready-only for now.

resources/icons/wnode.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#9EA1AE" fill-rule="nonzero" d="M17 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm0 1.5a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM7 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM7 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm2-3.75h6v1.5H9v-1.5z"/>
+</svg>

src/status_im/constants.cljs

@@ -81,6 +81,12 @@
    (merge testnet-networks
           (when config/mainnet-networks-enabled? mainnet-networks))))
 
+;; adamb's status-cluster enode
+(def default-wnode {:name "Status mailserver"
+                    :address "enode://08d8eb6177b187049f6c97ed3f6c74fbbefb94c7ad10bafcaf4b65ce89c314dcfee0a8bc4e7a5b824dfa08b45b360cc78f34f0aff981f8386caa07652d2e601b@163.172.177.138:40404"})
+
+(def default-wnodes [default-wnode])
+
 (def ^:const send-transaction-no-error-code        "0")
 (def ^:const send-transaction-default-error-code   "1")
 (def ^:const send-transaction-password-error-code  "2")

src/status_im/protocol/web3/inbox.cljs

@@ -1,5 +1,6 @@
 (ns status-im.protocol.web3.inbox
-  (:require [status-im.protocol.web3.utils :as utils]
+  (:require [status-im.constants :as constants]
+            [status-im.protocol.web3.utils :as utils]
             [status-im.native-module.core :as status]
             [status-im.protocol.web3.keys :as keys]
             [taoensso.timbre :as log]))
@@ -15,7 +16,7 @@
 (def default-enode "enode://0f51d75c9469de0852571c4618fe151265d4930ea35f968eb1a12e69c12f7cbabed856a12b31268a825ca2c9bafa47ef665b1b17be1ab71de83338c4b7439b24@127.0.0.1:30303")
 
 ;; adamb's status-cluster enode
-(def cluster-enode "enode://08d8eb6177b187049f6c97ed3f6c74fbbefb94c7ad10bafcaf4b65ce89c314dcfee0a8bc4e7a5b824dfa08b45b360cc78f34f0aff981f8386caa07652d2e601b@163.172.177.138:40404")
+(def cluster-enode (:address constants/default-wnode))
 
 ;; TODO(oskarth): Rewrite callback-heavy code with CSP and/or coeffects
 ;; TODO(oskarth): Memoize addPeer and markTrusted, similar to keys/get-sym-key

src/status_im/translations/en.cljs

@@ -355,7 +355,10 @@
    :new-network                           "New network"
    :add-network                           "Add network"
    :add-new-network                       "Add new network"
+   :add-wnode                             "Add mailserver"
    :existing-networks                     "Existing networks"
+   ;; TODO(dmitryn): come up with better description/naming. Suggested namings: Mailbox and Master Node
+   :existing-wnodes                       "Existing mailservers"
    :add-json-file                         "Add a JSON file"
    :paste-json-as-text                    "Paste JSON as text"
    :paste-json                            "Paste JSON"
@@ -367,6 +370,7 @@
    :rpc-url                               "RPC URL"
    :remove-network                        "Remove network"
    :network-settings                      "Network settings"
+   :offline-messaging-settings            "Offline messages settings"
    :edit-network-warning                  "Be careful, editing the network data may disable this network for you"
    :connecting-requires-login             "Connecting to another network requires login"
    :close-app-title                       "Warning!"

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

@@ -70,7 +70,8 @@
             :icons/share               (slurp-svg "./resources/icons/share.svg")
             :icons/tooltip-triangle    (slurp-svg "./resources/icons/tooltip-triangle.svg")
             :icons/open                (slurp-svg "./resources/icons/open.svg")
-            :icons/network             (slurp-svg "./resources/icons/network.svg")})
+            :icons/network             (slurp-svg "./resources/icons/network.svg")
+            :icons/wnode               (slurp-svg "./resources/icons/wnode.svg")})
 
 (defn normalize-property-name [n]
   (if (= n :icons/options)

src/status_im/ui/screens/offline_messaging_settings/styles.cljs

@@ -0,0 +1,42 @@
+(ns status-im.ui.screens.offline-messaging-settings.styles
+  (:require [status-im.ui.components.styles :as common])
+  (:require-macros [status-im.utils.styles :refer [defstyle]]))
+
+(def wnodes-list
+  {:background-color common/color-light-gray})
+
+(def wnode-item-inner
+  {:padding-horizontal 16})
+
+(defstyle wnode-item
+  {:flex-direction     :row
+   :background-color   :white
+   :align-items        :center
+   :padding-horizontal 16
+   :ios                {:height 64}
+   :android            {:height 56}})
+
+(defstyle wnode-item-name-text
+  {:color   common/color-black
+   :ios     {:font-size      17
+             :letter-spacing -0.2
+             :line-height    20}
+   :android {:font-size 16}})
+
+(defstyle wnode-item-connected-text
+  {:color   common/color-gray4
+   :ios     {:font-size      14
+             :margin-top     6
+             :letter-spacing -0.2}
+   :android {:font-size  12
+             :margin-top 2}})
+
+(defn wnode-icon [connected?]
+  {:width            40
+   :height           40
+   :border-radius    20
+   :background-color (if connected?
+                       common/color-light-blue
+                       common/color-light-gray)
+   :align-items      :center
+   :justify-content  :center})

src/status_im/ui/screens/offline_messaging_settings/views.cljs

@@ -0,0 +1,72 @@
+(ns status-im.ui.screens.offline-messaging-settings.views
+  (:require [status-im.constants :as constants]
+            [status-im.i18n :as i18n]
+            [status-im.ui.components.common.common :as common]
+            [status-im.ui.components.icons.vector-icons :as vector-icons]
+            [status-im.ui.components.list.views :as list]
+            [status-im.ui.components.react :as react]
+            [status-im.ui.components.status-bar.view :as status-bar]
+            [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.ui.screens.offline-messaging-settings.styles :as styles]
+            [status-im.utils.platform :as platform]
+            [taoensso.timbre :as log]
+            [reagent.core :as reagent])
+  (:require-macros [status-im.utils.views :as views]))
+
+(defn- add-wnode []
+  ;; TODO:(dmitryn) to be added in #2751
+  (log/info "add wnode not implemented"))
+
+(defn- wnode-icon [connected?]
+  [react/view (styles/wnode-icon connected?)
+   [vector-icons/icon :icons/wnode {:color (if connected? :white :gray)}]])
+
+(defn- render-row [current-wnode]
+  (fn [{:keys [address name] :as row} _ _]
+    (let [connected? (= address (:address current-wnode))]
+      [react/list-item
+       ^{:key row}
+       [react/touchable-highlight
+        {:on-press add-wnode}
+        [react/view styles/wnode-item
+         [wnode-icon connected?]
+         [react/view styles/wnode-item-inner
+          [react/text {:style styles/wnode-item-name-text}
+           name]
+          #_(when connected?
+            [react/text {:style styles/wnode-item-connected-text}
+             (i18n/label :t/connected)])]]]])))
+
+(defn- form-title [label wnodes]
+  (-> (common/form-title label {:count-value (count wnodes)})
+      (update-in [1 2 1] dissoc :margin-top)))
+
+(defn- render-header [wnodes]
+  [react/list-item
+   [react/view
+    [form-title (i18n/label :t/existing-wnodes) wnodes]
+    [common/list-header]]])
+
+(defn- render-footer []
+  [react/list-item [react/view
+                    [common/list-footer]
+                    [common/bottom-shadow]]])
+
+(views/defview offline-messaging-settings []
+  ;; TODO:(dmitryn) store wnodes in user account, but now use defaults for MVP
+  (let [current-wnode  constants/default-wnode
+        wnodes         constants/default-wnodes]
+    [react/view {:flex 1}
+     [status-bar/status-bar]
+     [toolbar/simple-toolbar (i18n/label :t/offline-messaging-settings)]
+     (when platform/ios?
+       [common/separator])
+     [react/view {:flex 1}
+      ;; TODO(dmitryn) migrate to :header/:footer properties of flat-list
+      ;; after merge of https://github.com/status-im/status-react/pull/2297/
+      [render-header wnodes]
+      [list/flat-list {:data wnodes
+                       :separator? false
+                       :render-fn (render-row current-wnode)
+                       :ListFooterComponent (reagent/as-element (render-footer))
+                       :style styles/wnodes-list}]]]))

src/status_im/ui/screens/profile/styles.cljs

@@ -138,10 +138,22 @@
    :android            {:height 72}
    :ios                {:height 64}})
 
+(defstyle offline-messaging-settings
+  {:padding-horizontal 16
+   :flex-direction     :row
+   :align-items        :center
+   :background-color   color-white
+   :android            {:height 72}
+   :ios                {:height 64}})
+
 (def network-settings-text
   (merge {:flex 1}
          profile-setting-text))
 
+(def offline-messaging-settings-text
+  (merge {:flex 1}
+         profile-setting-text))
+
 (def edit-line-color
   (if platform/ios?
     (str color-gray5 "80")

src/status_im/ui/screens/profile/views.cljs

@@ -10,7 +10,7 @@
             [status-im.ui.components.context-menu :refer [context-menu]]
             [status-im.ui.components.list-selection :refer [share-options]]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.icons.vector-icons :as vi]
+            [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.styles :refer [color-blue]]
             [status-im.ui.components.toolbar.actions :as actions]
@@ -19,8 +19,7 @@
             [status-im.ui.screens.profile.styles :as styles]
             [status-im.utils.datetime :as time]
             [status-im.utils.utils :refer [hash-tag?]]
-            [status-im.utils.config :as config]
+            [status-im.utils.config :as config])
-            [status-im.ui.components.icons.vector-icons :as vector-icons])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
 (defn my-profile-toolbar []
@@ -98,7 +97,7 @@
      value]]
    (when options
      [context-menu
-      [vi/icon :icons/options]
+      [vector-icons/icon :icons/options]
       options
       nil
       styles/profile-info-item-button])])
@@ -164,7 +163,15 @@
    [react/view styles/network-settings
     [react/text {:style styles/network-settings-text}
      (label :t/network-settings)]
-    [vi/icon :icons/forward {:color :gray}]]])
+    [vector-icons/icon :icons/forward {:color :gray}]]])
+
+(defn offline-messaging-settings []
+  [react/touchable-highlight
+   {:on-press #(dispatch [:navigate-to :offline-messaging-settings])}
+   [react/view styles/offline-messaging-settings
+    [react/text {:style styles/offline-messaging-settings-text}
+     (label :t/offline-messaging-settings)]
+    [vector-icons/icon :icons/forward {:color :gray}]]])
 
 (defn profile-info [{:keys [whisper-identity status phone] :as contact}]
   [react/view
@@ -185,7 +192,11 @@
     [{:value #(dispatch [:my-profile/update-phone-number])
       :text  (label :t/edit)}]]
    [info-item-separator]
-   [network-settings]])
+   [network-settings]
+   (when config/offline-inbox-enabled?
+     [info-item-separator])
+   (when config/offline-inbox-enabled?
+     [offline-messaging-settings])])
 
 (defn profile-status [status & [edit?]]
   [react/view styles/profile-status-container

src/status_im/ui/screens/views.cljs

@@ -53,6 +53,7 @@
             [status-im.ui.screens.discover.dapp-details.views :as discover-dapp-details]
 
             [status-im.ui.screens.network-settings.views :refer [network-settings]]
+            [status-im.ui.screens.offline-messaging-settings.views :refer [offline-messaging-settings]]
             [status-im.ui.screens.network-settings.add-rpc.views :refer [add-rpc-url]]
             [status-im.ui.screens.network-settings.network-details.views :refer [network-details]]
             [status-im.ui.screens.network-settings.parse-json.views :refer [paste-json-text]]))
@@ -108,6 +109,7 @@
                           :login login
                           :recover recover
                           :network-settings network-settings
+                          :offline-messaging-settings offline-messaging-settings
                           :paste-json-text paste-json-text
                           :add-rpc-url add-rpc-url
                           :network-details network-details