added network info form
This commit is contained in:
parent
4078fe9980
commit
cf2be3b176
|
@ -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
|
||||
[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
|
||||
[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))]]]))
|
||||
|
|
|
@ -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}
|
||||
:background-color styles/color-white}
|
||||
: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})
|
|
@ -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")
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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)))
|
|
@ -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})
|
||||
|
|
|
@ -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]]]]))
|
||||
|
|
|
@ -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])
|
||||
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue