added network info form

src/status_im/components/common/common.cljs

@@ -1,60 +1,74 @@
 (ns status-im.components.common.common
-  (:require [status-im.components.react :refer [view text linear-gradient]]
+  (:require-macros [status-im.utils.views :refer [defview letsubs]])
-            [status-im.components.icons.vector-icons :as vi]
+  (:require [status-im.components.react :as react]
+            [status-im.components.icons.vector-icons :as vector-icons]
             [status-im.components.context-menu :refer [context-menu]]
-            [status-im.utils.platform :as p]
+            [status-im.utils.platform :as platform]
-            [status-im.components.common.styles :as st]))
+            [status-im.components.common.styles :as styles]
+            [status-im.i18n :as i18n]))
 
 (defn top-shadow []
-  (when p/android?
+  (when platform/android?
-    [linear-gradient
+    [react/linear-gradient
-     {:style  st/gradient-bottom
+     {:style  styles/gradient-bottom
-      :colors st/gradient-top-colors}]))
+      :colors styles/gradient-top-colors}]))
 
 (defn bottom-shadow []
-  (when p/android?
+  (when platform/android?
-    [linear-gradient
+    [react/linear-gradient
-     {:style  st/gradient-top
+     {:style  styles/gradient-top
-      :colors st/gradient-bottom-colors}]))
+      :colors styles/gradient-bottom-colors}]))
 
 (defn separator [style & [wrapper-style]]
-  [view (merge st/separator-wrapper wrapper-style)
+  [react/view (merge styles/separator-wrapper wrapper-style)
-   [view (merge st/separator style)]])
+   [react/view (merge styles/separator style)]])
 
 (defn form-spacer []
-  [view
+  [react/view
    [bottom-shadow]
-   [view st/form-spacer]
+   [react/view styles/form-spacer]
    [top-shadow]])
 
 (defn list-separator []
-  [separator st/list-separator])
+  [separator styles/list-separator])
 
 (defn list-footer []
-  [view st/list-header-footer-spacing])
+  [react/view styles/list-header-footer-spacing])
 
 (defn list-header []
- [view st/list-header-footer-spacing])
+ [react/view styles/list-header-footer-spacing])
 
 (defn form-title [label & [{:keys [count-value extended? options]}]]
-  [view
+  [react/view
-   [view st/form-title-container
+   [react/view styles/form-title-container
-    [view st/form-title-inner-container
+    [react/view styles/form-title-inner-container
-     [text {:style st/form-title
+     [react/text {:style styles/form-title
-            :font  :medium}
+                  :font  :medium}
       label]
      (when-not (nil? count-value)
-       [text {:style st/form-title-count
+       [react/text {:style styles/form-title-count
-              :font  :medium}
+                    :font  :medium}
         count-value])]
     (when extended?
-      [view
+      [react/view
-       [view {:flex 1}]])
+       [react/view {:flex 1}]])
     (when extended?
-      [view st/form-title-extend-container
+      [react/view styles/form-title-extend-container
        [context-menu
-        [vi/icon :icons/options]
+        [vector-icons/icon :icons/options]
         options
         nil
-        st/form-title-extend-button]])]
+        styles/form-title-extend-button]])]
    [top-shadow]])
+
+(defview network-info [{:keys [text-color]}]
+  (letsubs [testnet?     [:testnet?]
+            testnet-name [:testnet-name]]
+    [react/view
+     [react/view styles/network-container
+      [react/view styles/network-icon
+       [vector-icons/icon :icons/network {:color :white}]]
+      [react/text {:style (styles/network-text text-color)}
+       (if testnet?
+         (i18n/label :t/testnet-text {:testnet testnet-name})
+         (i18n/label :t/mainnet-text))]]]))

src/status_im/components/common/styles.cljs

@@ -1,16 +1,11 @@
 (ns status-im.components.common.styles
   (:require-macros [status-im.utils.styles :refer [defstyle]])
-  (:require [status-im.utils.platform :as p]
+  (:require [status-im.components.styles :as styles]))
-            [status-im.components.styles :refer [color-white
-                                                 color-light-gray
-                                                 color-gray5
-                                                 text4-color
-                                                 text1-color]]))
 
 (def gradient-top
   {:flexDirection   :row
    :height          3
-   :backgroundColor color-light-gray})
+   :backgroundColor styles/color-light-gray})
 
 (def gradient-top-colors
   ["rgba(25, 53, 76, 0.01)"
@@ -19,19 +14,19 @@
 (def gradient-bottom
   {:flexDirection   :row
    :height          2
-   :backgroundColor color-light-gray})
+   :backgroundColor styles/color-light-gray})
 
 (def gradient-bottom-colors
   ["rgba(25, 53, 76, 0.1)"
    "rgba(25, 53, 76, 0.01)"])
 
 (def separator-wrapper
-  {:background-color color-white})
+  {:background-color styles/color-white})
 
 (defstyle separator
   {:android {:height 0}
    :ios     {:height           1
-             :background-color color-gray5
+             :background-color styles/color-gray5
              :opacity          0.5}})
 
 (def list-separator
@@ -45,30 +40,30 @@
    :padding-right  16
    :flex           1
    :flex-direction :row
-   :ios            {:background-color color-white
+   :ios            {:background-color styles/color-white
                     :padding-top      19
                     :padding-bottom   15
                     :margin-top       16}
-   :android        {:background-color color-light-gray
+   :android        {:background-color styles/color-light-gray
                     :padding-top      20
                     :padding-bottom   17
                     :margin-top       8}})
 
 (defstyle form-title-extend-container
-  {:ios          {:margin-top 16
+  {:ios     {:margin-top       16
-                  :background-color color-white}
+             :background-color styles/color-white}
-   :android      {:margin-top 8
+   :android {:margin-top       8
-                  :background-color color-light-gray}})
+             :background-color styles/color-light-gray}})
 
 (def form-title-extend-button
   {:padding 16})
 
 (defstyle form-title
   {:flex-shrink 1
-   :ios         {:color          text1-color
+   :ios         {:color          styles/text1-color
                  :letter-spacing -0.2
                  :font-size      16}
-   :android     {:color     text4-color
+   :android     {:color     styles/text4-color
                  :font-size 14}})
 
 (def form-title-count
@@ -77,12 +72,33 @@
           :opacity       0.6
           :padding-left  8
           :padding-right 5
-          :color         text4-color}))
+          :color         styles/text4-color}))
 
 (defstyle form-spacer
   {:ios     {:height 16}
    :android {:height 11}})
 
 (defstyle list-header-footer-spacing
-  {:android {:background-color color-white
+  {:android {:background-color styles/color-white
              :height           8}})
+
+(def network-container
+  {:flex-direction     :row
+   :padding-horizontal 13
+   :padding-vertical   11
+   :align-items        :center})
+
+(defn network-text [text-color]
+  {:flex           1
+   :color          (or text-color styles/color-black)
+   :letter-spacing -0.2
+   :font-size      14
+   :margin-left    16})
+
+(def network-icon
+  {:width            40
+   :height           40
+   :border-radius    (/ 40 2)
+   :background-color styles/color-green-4
+   :align-items      :center
+   :justify-content  :center})

src/status_im/components/styles.cljs

@@ -66,6 +66,7 @@
 (def color-green-2 "#448469")
 (def color-green-3 "#44d058")
 (def color-green-3-light "rgba(68, 208, 88, 0.2)")
+(def color-green-4 "#0dcd8d")
 (def color-cyan "#7adcfb")
 
 (def color-separator "#D6D6D6")

src/status_im/constants.cljs

@@ -42,6 +42,12 @@
 (def ropsten-id 3)
 (def rinkeby-id 4)
 
+(defn get-testnet-name [testnet-id]
+  (cond
+    (= testnet-id ropsten-id) "Ropsten"
+    (= testnet-id rinkeby-id) "Rinkeby"
+    :else "Unknown"))
+
 (def default-networks
   (transform-config
     {"testnet"     {:id     "testnet",

src/status_im/translations/en.cljs

@@ -103,7 +103,8 @@
    :error-incorrect-name                  "Please select another name"
    :error-incorrect-email                 "Incorrect e-mail"
    :profile-testnet-icon                  "Testnet"
-   :profile-testnet-text                  "Testnet Only. Please do not send real ETH or SNT to your address"
+   :testnet-text                          "You’re on the {{testnet}} Testnet. Do not send real ETH or SNT to your address."
+   :mainnet-text                          "You’re on the Mainnet. Real ETH will be send."
 
    ;;make_photo
    :image-source-title                    "Profile image"

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

@@ -21,3 +21,9 @@
  :<- [:get-network-id]
  (fn [network-id]
    (contains? #{constants/rinkeby-id constants/ropsten-id} network-id)))
+
+(reg-sub
+  :testnet-name
+  :<- [:get-network-id]
+  (fn [network-id]
+    (constants/get-testnet-name network-id)))

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

@@ -204,25 +204,4 @@
   (merge profile-status-text
          {:color color-gray4}))
 
-(def testnet-only-container
+(def network-info {:background-color :white})
-  {:background-color styles/color-dark
-   :flex-direction   :row
-   :padding          14})
-
-(def testnet-only-text
-  {:flex        1
-   :color       color-white
-   :margin-left 12})
-
-(def testnet-icon
-  {:border-radius   15
-   :border-width    1
-   :border-color    styles/color-gray
-   :height          27
-   :width           65
-   :flex-direction  :row
-   :align-items     :center
-   :justify-content :center})
-
-(def testnet-icon-text
-  {:color color-white})

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

@@ -6,9 +6,7 @@
              [action-button action-button-disabled action-separator]]
             [status-im.components.action-button.styles :refer [actions-list]]
             [status-im.components.chat-icon.screen :refer [my-profile-icon]]
-            [status-im.components.common.common
+            [status-im.components.common.common :as common]
-             :refer
-             [bottom-shadow form-spacer separator]]
             [status-im.components.context-menu :refer [context-menu]]
             [status-im.components.list-selection :refer [share-options]]
             [status-im.components.react :as react]
@@ -21,7 +19,8 @@
             [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.components.icons.vector-icons :as vector-icons])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
 (defn my-profile-toolbar []
@@ -125,7 +124,7 @@
     :accessibility-label :profile-public-key}])
 
 (defn info-item-separator []
-  [separator styles/info-item-separator])
+  [common/separator styles/info-item-separator])
 
 (defn tag-view [tag]
   [react/text {:style {:color color-blue}
@@ -194,58 +193,50 @@
         [react/text {:style styles/profile-status-text}
          (colorize-status-hashtags status)]]]])])
 
-
+(defn network-info []
-(defn testnet-only []
+  [react/view styles/network-info
-  [react/view styles/testnet-only-container
+   [common/network-info]
-   [react/view styles/testnet-icon
+   [common/separator]])
-    [react/text {:style styles/testnet-icon-text}
-     (label :t/profile-testnet-icon)]]
-   [react/text {:style styles/testnet-only-text}
-    (label :t/profile-testnet-text)]])
 
 (defview my-profile []
-  (letsubs [{:keys [status] :as current-account} [:get-current-account]
+  (letsubs [{:keys [status] :as current-account} [:get-current-account]]
-            testnet? [:testnet?]]
     [react/view styles/profile
      [status-bar]
      [my-profile-toolbar]
-     (when testnet?
+     [network-info]
-       [testnet-only])
      [react/scroll-view
       [react/view styles/profile-form
        [profile-badge current-account]
        [profile-status status true]]
-      [form-spacer]
+      [common/form-spacer]
       [react/view actions-list
        [action-button {:label     (label :t/show-qr)
                        :icon      :icons/qr
                        :icon-opts {:color :blue}
                        :on-press  (show-qr current-account :public-key)}]]
-      [form-spacer]
+      [common/form-spacer]
       [react/view styles/profile-info-container
        [my-profile-info current-account]
-       [bottom-shadow]]]]))
+       [common/bottom-shadow]]]]))
 
 (defview profile []
   (letsubs [{:keys [pending?
                     status
                     whisper-identity]
              :as   contact} [:contact]
-            chat-id  [:get :current-chat-id]
+            chat-id  [:get :current-chat-id]]
-            testnet? [:testnet?]]
     [react/view styles/profile
      [status-bar]
      [profile-toolbar contact]
-     (when testnet?
+     [network-info]
-       [testnet-only])
      [react/scroll-view
       [react/view styles/profile-form
        [profile-badge contact]
        (when (and (not (nil? status)) (not (string/blank? status)))
          [profile-status status])]
-      [form-spacer]
+      [common/form-spacer]
       [profile-actions contact chat-id]
-      [form-spacer]
+      [common/form-spacer]
       [react/view styles/profile-info-container
        [profile-info contact]
-       [bottom-shadow]]]]))
+       [common/bottom-shadow]]]]))

src/status_im/ui/screens/wallet/components/views.cljs

@@ -118,12 +118,6 @@
         [react/text {:style styles/wallet-value}
          "..."])]]))
 
-(defn network-label
-  ([n] (network-label [{} n]))
-  ([style n] [react/view (merge styles/network-container
-                                style)
-              [react/text {:style styles/network} n]]))
-
 (defn separator []
   [react/view styles/separator])
 

src/status_im/ui/screens/wallet/request/styles.cljs

@@ -2,15 +2,12 @@
   (:require-macros [status-im.utils.styles :refer [defstyle]])
   (:require [status-im.components.styles :as styles]))
 
-(def network-label
-  {:margin-top 27})
-
 (def network-container
   {:flex        1
    :align-items :center})
 
 (defstyle qr-container
-  {:margin-top       16
+  {:margin-top       8
    :padding          16
    :background-color styles/color-white
    :ios              {:border-radius 8}

src/status_im/ui/screens/wallet/request/views.cljs

@@ -13,8 +13,9 @@
     [status-im.ui.screens.wallet.request.styles :as styles]
     [status-im.components.styles :as components.styles]
     [status-im.i18n :as i18n]
+    [status-im.utils.platform :as platform]
     [status-im.utils.eip.eip67 :as eip67]
-    [status-im.utils.platform :as platform]))
+    [status-im.components.common.common :as common]))
 
 (defn toolbar-view []
   [toolbar/toolbar2 {:style wallet.styles/toolbar :hide-border? true}
@@ -42,11 +43,10 @@
     [react/keyboard-avoiding-view wallet.styles/wallet-modal-container
      [status-bar/status-bar {:type :wallet}]
      [toolbar-view]
+     [common/network-info {:text-color :white}]
      [react/scroll-view {:ref #(reset! scroll %)}
       [react/view components.styles/flex
         [react/view styles/network-container
-         ;;TODO (andrey) name of active network should be used
-         [components/network-label styles/network-label "Testnet"]
          [react/view styles/qr-container
           [qr-code]]]
         [react/view wallet.styles/choose-wallet-container

src/status_im/ui/screens/wallet/send/views.cljs

@@ -9,6 +9,7 @@
             [status-im.components.toolbar-new.actions :as act]
             [status-im.components.toolbar-new.view :as toolbar]
             [status-im.components.camera :as camera]
+            [status-im.components.common.common :as common]
             [status-im.utils.utils :as utils]
             [status-im.i18n :as i18n]
             [status-im.utils.money :as money]
@@ -116,6 +117,7 @@
        [react/view components.styles/flex
         [status-bar/status-bar {:type :wallet}]
         [toolbar-view signing?]
+        [common/network-info {:text-color :white}]
         [react/scroll-view {:keyboardShouldPersistTaps :always}
          [react/view components.styles/flex
           [react/view wallet.styles/choose-participant-container
@@ -164,6 +166,7 @@
      [react/view components.styles/flex
       [status-bar/status-bar {:type :modal-wallet}]
       [toolbar-modal from-chat?]
+      [common/network-info {:text-color :white}]
       [react/scroll-view {:keyboardShouldPersistTaps :always}
        [react/view components.styles/flex
         [react/view wallet.styles/choose-participant-container