diff --git a/src/status_im/components/common/common.cljs b/src/status_im/components/common/common.cljs index e44131d442..b003eeac94 100644 --- a/src/status_im/components/common/common.cljs +++ b/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]] - [status-im.components.icons.vector-icons :as vi] + (:require-macros [status-im.utils.views :refer [defview letsubs]]) + (: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.components.common.styles :as st])) + [status-im.utils.platform :as platform] + [status-im.components.common.styles :as styles] + [status-im.i18n :as i18n])) (defn top-shadow [] - (when p/android? - [linear-gradient - {:style st/gradient-bottom - :colors st/gradient-top-colors}])) + (when platform/android? + [react/linear-gradient + {:style styles/gradient-bottom + :colors styles/gradient-top-colors}])) (defn bottom-shadow [] - (when p/android? - [linear-gradient - {:style st/gradient-top - :colors st/gradient-bottom-colors}])) + (when platform/android? + [react/linear-gradient + {:style styles/gradient-top + :colors styles/gradient-bottom-colors}])) (defn separator [style & [wrapper-style]] - [view (merge st/separator-wrapper wrapper-style) - [view (merge st/separator style)]]) + [react/view (merge styles/separator-wrapper wrapper-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 - [view st/form-title-container - [view st/form-title-inner-container - [text {:style st/form-title - :font :medium} + [react/view + [react/view styles/form-title-container + [react/view styles/form-title-inner-container + [react/text {:style styles/form-title + :font :medium} label] (when-not (nil? count-value) - [text {:style st/form-title-count - :font :medium} + [react/text {:style styles/form-title-count + :font :medium} count-value])] (when extended? - [view - [view {:flex 1}]]) + [react/view + [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))]]])) diff --git a/src/status_im/components/common/styles.cljs b/src/status_im/components/common/styles.cljs index ecdd052475..40114232a2 100644 --- a/src/status_im/components/common/styles.cljs +++ b/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] - [status-im.components.styles :refer [color-white - color-light-gray - color-gray5 - text4-color - text1-color]])) + (:require [status-im.components.styles :as styles])) (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 - :background-color color-white} - :android {:margin-top 8 - :background-color color-light-gray}}) + {:ios {:margin-top 16 + :background-color styles/color-white} + :android {:margin-top 8 + :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}) \ No newline at end of file diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index 2ff809c6e9..1c4b1f974f 100644 --- a/src/status_im/components/styles.cljs +++ b/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") diff --git a/src/status_im/constants.cljs b/src/status_im/constants.cljs index 3dd1cb00dd..ebf8762e18 100644 --- a/src/status_im/constants.cljs +++ b/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", diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index a77b68d7ef..8fd9f004c7 100644 --- a/src/status_im/translations/en.cljs +++ b/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" diff --git a/src/status_im/ui/screens/network_settings/subs.cljs b/src/status_im/ui/screens/network_settings/subs.cljs index 1531895f15..02c79b10cd 100644 --- a/src/status_im/ui/screens/network_settings/subs.cljs +++ b/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))) \ No newline at end of file diff --git a/src/status_im/ui/screens/profile/styles.cljs b/src/status_im/ui/screens/profile/styles.cljs index 3766c8192e..46820c577d 100644 --- a/src/status_im/ui/screens/profile/styles.cljs +++ b/src/status_im/ui/screens/profile/styles.cljs @@ -204,25 +204,4 @@ (merge profile-status-text {:color color-gray4})) -(def testnet-only-container - {: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}) +(def network-info {:background-color :white}) diff --git a/src/status_im/ui/screens/profile/views.cljs b/src/status_im/ui/screens/profile/views.cljs index 291f7f71cf..4fe29fbdd0 100644 --- a/src/status_im/ui/screens/profile/views.cljs +++ b/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 - :refer - [bottom-shadow form-spacer separator]] + [status-im.components.common.common :as common] [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 testnet-only [] - [react/view styles/testnet-only-container - [react/view styles/testnet-icon - [react/text {:style styles/testnet-icon-text} - (label :t/profile-testnet-icon)]] - [react/text {:style styles/testnet-only-text} - (label :t/profile-testnet-text)]]) +(defn network-info [] + [react/view styles/network-info + [common/network-info] + [common/separator]]) (defview my-profile [] - (letsubs [{:keys [status] :as current-account} [:get-current-account] - testnet? [:testnet?]] + (letsubs [{:keys [status] :as current-account} [:get-current-account]] [react/view styles/profile [status-bar] [my-profile-toolbar] - (when testnet? - [testnet-only]) + [network-info] [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] - testnet? [:testnet?]] + chat-id [:get :current-chat-id]] [react/view styles/profile [status-bar] [profile-toolbar contact] - (when testnet? - [testnet-only]) + [network-info] [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]]]])) diff --git a/src/status_im/ui/screens/wallet/components/views.cljs b/src/status_im/ui/screens/wallet/components/views.cljs index 0aedd31609..4026b2a352 100644 --- a/src/status_im/ui/screens/wallet/components/views.cljs +++ b/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]) diff --git a/src/status_im/ui/screens/wallet/request/styles.cljs b/src/status_im/ui/screens/wallet/request/styles.cljs index 6a75450e66..a2b4bdc2b3 100644 --- a/src/status_im/ui/screens/wallet/request/styles.cljs +++ b/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} diff --git a/src/status_im/ui/screens/wallet/request/views.cljs b/src/status_im/ui/screens/wallet/request/views.cljs index afeaa81bf4..92fd8f7c47 100644 --- a/src/status_im/ui/screens/wallet/request/views.cljs +++ b/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 diff --git a/src/status_im/ui/screens/wallet/send/views.cljs b/src/status_im/ui/screens/wallet/send/views.cljs index 8cbedcccc3..811431402b 100644 --- a/src/status_im/ui/screens/wallet/send/views.cljs +++ b/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