status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[8070] feature - [Profile] My profile screens reorganisation and items design 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
bitsikka 2019-08-23 14:57:16 +05:45 committed by Andrey Shovkoplyas
parent 58204f935b
commit 3541f636df
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
41 changed files with 1530 additions and 747 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

265
fiddle/src/fiddle/views/list_items.cljs
View File

@ -11,136 +11,187 @@
content]]) content]])
(defn list-items [] (defn list-items []
[react/view {:background-color colors/gray-lighter :flex 1 :padding 20 :flex-direction :row :flex-wrap :wrap} [react/view
{:background-color colors/gray-lighter
:flex 1
:padding 20
:flex-direction :row
:flex-wrap :wrap}
[react/view {:margin-right 10} [react/view {:margin-right 10}
[item "Default with Image" [item "Default with Image"
[list-item/list-item {:title "George" [list-item/list-item
:on-press #() {:title "George"
:image [react/view {:width 40 :height 40 :border-radius 20 :on-press #()
:background-color colors/green}]}]] :icon [react/view
{:width 40
:height 40
:border-radius 20
:background-color colors/green}]}]]
[item "Default with Image, icon" [item "Default with Image, icon"
[list-item/list-item {:title "George" [list-item/list-item
:on-press #() {:title "George"
:image [react/view {:width 40 :height 40 :border-radius 20 :on-press #()
:background-color colors/green}] :icon [react/view
:accessories [:more]}]] {:width 40
:height 40
:border-radius 20
:background-color colors/green}]
:accessories [:more]}]]
[item "With radio button (TODO!)" [item "With radio button (TODO!)"
[list-item/list-item {:title "George" [list-item/list-item
:on-press #() {:title "George"
:image [react/view {:width 40 :height 40 :border-radius 20 :on-press #()
:background-color colors/green}]}]]] :icon [react/view
{:width 40
:height 40
:border-radius 20
:background-color colors/green}]}]]]
[react/view {:margin-right 10} [react/view {:margin-right 10}
[item "Default wIth icon in circle" [item "Default wIth icon in circle"
[list-item/list-item {:title "Clear History" [list-item/list-item
:theme :action {:title "Clear History"
:icon :main-icons/close :theme :action
:on-press #()}]] :icon :main-icons/close
:on-press #()}]]
[item "Default wIth icon in circle, chevron" [item "Default wIth icon in circle, chevron"
[list-item/list-item {:title "Get a ENS username?" [list-item/list-item
:icon :main-icons/address {:title "Get a ENS username?"
:on-press #() :icon :main-icons/address
:accessories [:chevron]}]] :on-press #()
:accessories [:chevron]}]]
[item "Default wIth icon in circle, chevron and accessory" [item "Default wIth icon in circle, chevron and accessory"
[list-item/list-item {:title "Contacts" [list-item/list-item
:icon :main-icons/in_contacts {:title "Contacts"
:on-press #() :icon :main-icons/in_contacts
:accessories [[react/text {:style {:color colors/gray}} "4"] :on-press #()
:chevron]}]] :accessories [[react/text {:style {:color colors/gray}} "4"]
:chevron]}]]
[item "Default wIth icon in circle, chevron and badge" [item "Default wIth icon in circle, chevron and badge"
[list-item/list-item {:title "Privacy and Security" [list-item/list-item
:icon :main-icons/profile {:title "Privacy and Security"
:on-press #() :icon :main-icons/profile
:accessories [[react/view {:width 22 :height 22 :border-radius 11 :on-press #()
:background-color colors/blue :align-items :center :accessories
:justify-content :center} [[react/view {:width 22
[react/text {:style {:color colors/white :font-size 12}} "1"]] :height 22
:chevron]}]] :border-radius 11
:background-color colors/blue
:align-items :center
:justify-content :center}
[react/text {:style {:color colors/white :font-size 12}} "1"]]
:chevron]}]]
[item "Default wIth icon in circle, switch (TODO!)" [item "Default wIth icon in circle, switch (TODO!)"
[list-item/list-item {:title "Notifications" [list-item/list-item
:icon :main-icons/notification {:title "Notifications"
:on-press #() :icon :main-icons/notification
:accessories [[react/view {:width 22 :height 22 :border-radius 11 :on-press #()
:background-color colors/blue :align-items :center :accessories
:justify-content :center}]]}]] [[react/view {:width 22
:height 22
:border-radius 11
:background-color colors/blue
:align-items :center
:justify-content :center}]]}]]
[item "Default wIth icon in circle, red" [item "Default wIth icon in circle, red"
[list-item/list-item {:title "Delete and Leave" [list-item/list-item
:theme :action-red {:title "Delete and Leave"
:icon :main-icons/delete :theme :action-red
:on-press #()}]]] :icon :main-icons/delete
:on-press #()}]]]
[react/view {:margin-right 10} [react/view {:margin-right 10}
[item "Two lines with icon in circle, chevron" [item "Two lines with icon in circle, chevron"
[list-item/list-item {:title "alex.stateofus.eth" [list-item/list-item
:subtitle "ENS name" {:title "alex.stateofus.eth"
:icon :main-icons/address :subtitle "ENS name"
:accessories [:chevron] :icon :main-icons/address
:on-press #()}]] :accessories [:chevron]
:on-press #()}]]
[item "Two lines with icon in circle" [item "Two lines with icon in circle"
[list-item/list-item {:title "alex.stateofus.eth" [list-item/list-item
:subtitle "ENS name" {:title "alex.stateofus.eth"
:icon :main-icons/address :subtitle "ENS name"
:on-press #()}]] :icon :main-icons/address
:on-press #()}]]
[item "Two lines with icon in circle, blue title" [item "Two lines with icon in circle, blue title"
[list-item/list-item {:title "Add or Create a Profile" [list-item/list-item
:subtitle "Requires signout" {:title "Add or Create a Profile"
:theme :action :subtitle "Requires signout"
:icon :main-icons/address :theme :action
:on-press #()}]] :icon :main-icons/address
:on-press #()}]]
[item "Two lines with dapp icon,title and subtitle" [item "Two lines with dapp icon,title and subtitle"
[list-item/list-item {:title "CryptoKitties" [list-item/list-item
:subtitle "https://cryptokitties.co" {:title "CryptoKitties"
:image [react/view {:width 40 :height 40 :border-radius 20 :subtitle "https://cryptokitties.co"
:background-color colors/green}] :icon [react/view {:width 40
:on-press #()}]]] :height 40
:border-radius 20
:background-color colors/green}]
:on-press #()}]]]
[react/view {:margin-right 10} [react/view {:margin-right 10}
[item "Default Small" [item "Default Small"
[list-item/list-item {:title "Everybody" [list-item/list-item
:type :small {:title "Everybody"
:on-press #()}]] :type :small
:on-press #()}]]
[item "Default Small button" [item "Default Small button"
[list-item/list-item {:title "Change Passcode" [list-item/list-item
:type :small {:title "Change Passcode"
:theme :action :type :small
:on-press #()}]] :theme :action
:on-press #()}]]
[item "Default Small red button" [item "Default Small red button"
[list-item/list-item {:title "Delete all Contacts" [list-item/list-item
:type :small {:title "Delete all Contacts"
:theme :action-red :type :small
:on-press #()}]] :theme :action-red
:on-press #()}]]
[item "Default Small with chevron" [item "Default Small with chevron"
[list-item/list-item {:title "Recovery Phrase" [list-item/list-item
:type :small {:title "Recovery Phrase"
:on-press #() :type :small
:accessories [:chevron]}]] :on-press #()
:accessories [:chevron]}]]
[item "Default Small with chevron and accessory" [item "Default Small with chevron and accessory"
[list-item/list-item {:title "Main Currency" [list-item/list-item
:type :small {:title "Main Currency"
:on-press #() :type :small
:accessories [[react/text {:style {:color colors/gray}} "USD"] :on-press #()
:chevron]}]] :accessories [[react/text {:style {:color colors/gray}} "USD"]
:chevron]}]]
[item "Default Small with chevron, badge" [item "Default Small with chevron, badge"
[list-item/list-item {:title "Recovery Phrase" [list-item/list-item
:type :small {:title "Recovery Phrase"
:on-press #() :type :small
:accessories [[react/view {:width 22 :height 22 :border-radius 11 :on-press #()
:background-color colors/blue :align-items :center :accessories
:justify-content :center} [[react/view
[react/text {:style {:color colors/white :font-size 12}} "1"]] {:width 22
:chevron]}]]] :height 22
:border-radius 11
:background-color colors/blue :align-items :center
:justify-content :center}
[react/text {:style {:color colors/white :font-size 12}} "1"]]
:chevron]}]]]
[react/view {:margin-right 10} [react/view {:margin-right 10}
[item "Long title" [item "Long title"
[list-item/list-item {:title "loooooooooong looooooong looooooong title" [list-item/list-item
:subtitle "ENS name" {:title "loooooooooong loooooooooooooong looooooong title"
:icon :main-icons/address :subtitle "ENS name"
:accessories [:chevron] :icon :main-icons/address
:on-press #()}]] :accessories [:chevron]
:on-press #()}]]
[item "Long subtitle" [item "Long subtitle"
[list-item/list-item {:title "alex.stateofus.eth" [list-item/list-item
:subtitle "loooooooooooong loooooong looooooong subtitle" {:title "alex.stateofus.eth"
:icon :main-icons/address :subtitle "loooooooooooooooong loooooong looooooong subtitle"
:accessories [:chevron] :icon :main-icons/address
:on-press #()}]] :accessories [:chevron]
[item "Long accessories" :on-press #()}]]
[list-item/list-item {:title "From" [item "Title-prefix + long title"
:type :small [list-item/list-item
:accessories ["loooooooooooongloooooonglooo00oooongaccessories"] {:title-prefix "From"
:on-press #()}]]]]) :title-prefix-width 45
:title "title-prefix and loooooong title really loooonglooo00oooong"
:type :small
:on-press #()}]]]])

2
src/status_im/ui/components/action_button/styles.cljs
View File

@ -11,7 +11,7 @@
:android {:height 64}}) :android {:height 64}})
(defnstyle action-button-icon-container [circle-color] (defnstyle action-button-icon-container [circle-color]
{:border-radius 50 {:border-radius 20
:width 40 :width 40
:height 40 :height 40
:align-items :center :align-items :center

3
src/status_im/ui/components/common/styles.cljs
View File

@ -131,7 +131,8 @@
:justify-content :center}) :justify-content :center})
(defn counter-label [size] (defn counter-label [size]
{:font-size (/ size 2) {:font-size (inc (/ size 2))
:typography :main-medium
:color colors/white :color colors/white
:text-align :center}) :text-align :center})

174
src/status_im/ui/components/copyable_text.cljs
View File

@ -1,90 +1,124 @@
(ns status-im.ui.components.copyable-text (ns status-im.ui.components.copyable-text
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [reagent.core :as reagent] (:require [reagent.core :as reagent]
[status-im.ui.components.react :as react]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.animation :as animation] [status-im.ui.components.animation :as animation]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.ui.components.typography :as typography])) [status-im.ui.components.typography :as typography]))
(defn hide-cue-atom [anim-opacity anim-y cue-atom] (defn hide-cue-atom [anim-opacity anim-y cue-atom]
(animation/start (animation/start
(animation/parallel (animation/parallel
[(animation/timing anim-opacity [(animation/timing
{:toValue 0 anim-opacity
:duration 140 {:toValue 0
:delay 1000 :duration 140
:easing (.-ease (animation/easing)) :delay 1000
:useNativeDriver true}) :easing (.-ease (animation/easing))
(animation/timing anim-y :useNativeDriver true})
{:toValue 0 (animation/timing
:duration 140 anim-y
:delay 1000 {:toValue 0
:easing (.-ease (animation/easing)) :duration 140
:useNativeDriver true})]) :delay 1000
:easing (.-ease (animation/easing))
:useNativeDriver true})])
#(reset! cue-atom false))) #(reset! cue-atom false)))
(defn show-cue-atom [anim-opacity anim-y cue-atom y] (defn show-cue-atom [anim-opacity anim-y cue-atom y]
(when @cue-atom (when @cue-atom
(animation/start (animation/start
(animation/parallel (animation/parallel
[(animation/timing anim-opacity [(animation/timing
{:toValue 1 anim-opacity
:duration 140 {:toValue 1
:easing (.-ease (animation/easing)) :duration 140
:useNativeDriver true}) :easing (.-ease (animation/easing))
(animation/timing anim-y :useNativeDriver true})
{:toValue y (animation/timing
:duration 140 anim-y
:easing (.-ease (animation/easing)) {:toValue y
:useNativeDriver true})]) :duration 140
:easing (.-ease (animation/easing))
:useNativeDriver true})])
#(hide-cue-atom anim-opacity anim-y cue-atom)))) #(hide-cue-atom anim-opacity anim-y cue-atom))))
(defn copy-action-visual-cue [anim-opacity anim-y width cue-atom] (defn copy-action-visual-cue [anim-opacity anim-y width cue-atom]
[react/animated-view {:style {:opacity anim-opacity [react/animated-view
:transform [{:translateY anim-y}] {:style
:height 34 {:opacity anim-opacity
:max-width @width :transform [{:translateY anim-y}]
:position :absolute :max-width @width
:border-radius 8 :z-index (if @cue-atom 1 -1)
:align-self :center :height 34
:z-index (if @cue-atom 1 -1) :position :absolute
:align-items :center :border-radius 8
:justify-content :center :align-self :center
:shadow-offset {:width 0 :height 4} :align-items :center
:shadow-radius 12 :justify-content :center
:shadow-opacity 1 :shadow-offset {:width 0 :height 4}
:shadow-color "rgba(0, 34, 51, 0.08)" :shadow-radius 12
:background-color colors/white}} :elevation 8
[react/view {:padding-horizontal 16 :shadow-opacity 1
:padding-vertical 7 :shadow-color "rgba(0, 34, 51, 0.08)"
:border-radius 8 :background-color colors/white}}
:background-color colors/white [react/view
:shadow-offset {:width 0 :height 2} {:padding-horizontal 16
:shadow-radius 4 :padding-vertical 7
:shadow-opacity 1 :border-radius 8
:shadow-color "rgba(0, 34, 51, 0.16)"} :background-color colors/white
[react/text {:style {:typography :main-medium :line-height 20 :font-size 14}} :shadow-offset {:width 0 :height 2}
:shadow-radius 4
:shadow-opacity 1
:shadow-color "rgba(0, 34, 51, 0.16)"}
[react/text
{:style
{:typography :main-medium
;; line height specified here because of figma spec
:line-height 20
:font-size 14}}
(i18n/label :sharing-copied-to-clipboard)]]]) (i18n/label :sharing-copied-to-clipboard)]]])
(defview copyable-text-view [{:keys [label copied-text]} content] (defn copyable-text-view [{:keys [label copied-text container-style]}
(letsubs [cue-atom (reagent/atom false) content]
width (reagent/atom nil) (let [cue-atom (reagent/atom false)
anim-y (animation/create-value 0) width (reagent/atom 0)
anim-opacity (animation/create-value 0)] height (reagent/atom 0)
[react/view anim-y (animation/create-value 0)
[copy-action-visual-cue anim-opacity anim-y width cue-atom] anim-opacity (animation/create-value 0)]
[react/touchable-opacity (reagent/create-class
{:active-opacity (if @cue-atom 1 0.7) {:reagent-render
:style {:margin-top 12 :margin-bottom 4} (fn [{:keys [copied-text]} _]
:on-press #(when (not @cue-atom) [react/view
(reset! cue-atom true) {:style (if container-style container-style {})
(show-cue-atom anim-opacity anim-y cue-atom -22) :on-layout
(react/copy-to-clipboard copied-text))} #(do
[react/view (reset! width (-> % .-nativeEvent .-layout .-width))
[react/text {:style {:font-size 13 :line-height 18 :font-weight "500" (reset! height (-> % .-nativeEvent .-layout .-height)))}
:color colors/gray :margin-bottom 4}} (when label
(i18n/label label)] [react/text
[react/view {:style
{:on-layout #(reset! width (-> % .-nativeEvent .-layout .-width))} {:font-size 13
content]]]])) ;; line height specified here because of figma spec
:line-height 18
:font-weight "500"
:color colors/gray
:margin-bottom 4}}
(i18n/label label)])
[copy-action-visual-cue anim-opacity anim-y width cue-atom]
[react/touchable-highlight
{:active-opacity (if @cue-atom 1 0.85)
:underlay-color colors/black
:on-press
#(when (not @cue-atom)
(reset! cue-atom true)
(show-cue-atom
anim-opacity
anim-y
cue-atom
(if (> @height 34)
(- (/ @height 2))
(- (+ 17 @height))))
(react/copy-to-clipboard copied-text))}
[react/view {:background-color colors/white}
content]]])})))

7
src/status_im/ui/components/icons/vector_icons.cljs
View File

@ -21,7 +21,8 @@
(defn icon (defn icon
([name] (icon name nil)) ([name] (icon name nil))
([name {:keys [color container-style accessibility-label width height] ([name {:keys [color resize-mode container-style
accessibility-label width height]
:or {accessibility-label :icon}}] :or {accessibility-label :icon}}]
^{:key name} ^{:key name}
[react/view [react/view
@ -33,6 +34,10 @@
[react/image {:source {:uri (keyword (clojure.core/name name))} [react/image {:source {:uri (keyword (clojure.core/name name))}
:style (cond-> {:width (or width 24) :style (cond-> {:width (or width 24)
:height (or height 24)} :height (or height 24)}
resize-mode
(assoc :resize-mode resize-mode)
color color
(assoc :tint-color (match-color color)))}]])) (assoc :tint-color (match-color color)))}]]))

87
src/status_im/ui/components/large_toolbar.cljs
View File

@ -1,52 +1,59 @@
(ns status-im.ui.components.large-toolbar (ns status-im.ui.components.large-toolbar
(:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require-macros [status-im.utils.views :as views])
(:require [reagent.core :as reagent] (:require [cljs-bean.core :refer [->clj ->js]]
[cljs-bean.core :refer [->clj ->js]] [reagent.core :as reagent]
[status-im.ui.components.animation :as animation]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.list.views :as list.views] [status-im.ui.components.list.views :as list.views]
[status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.toolbar.styles :as toolbar.styles] [status-im.ui.components.toolbar.styles :as toolbar.styles]
[status-im.utils.platform :as platform] [status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.animation :as animation])) [status-im.utils.platform :as platform]))
(def hidden (reagent/atom 0)) (def hidden (reagent/atom 0))
(def shown (reagent/atom 100)) (def shown (reagent/atom 100))
(def minimized-header-visible? (reagent/atom false)) (def minimized-header-visible? (reagent/atom false))
(def initial-on-show-done? (volatile! false)) (def initial-on-show-done? (volatile! false))
(defview animated-content-wrapper [header-in-toolbar has-nav? show?] (defn animated-content-wrapper [header-in-toolbar has-nav? show?]
(letsubs [anim-opacity (animation/create-value 0) (let [anim-opacity (animation/create-value 0)
to-hide (reagent/atom false)] to-hide (reagent/atom false)]
{:component-will-update (reagent/create-class
(fn [_ [_ _ _ show?]] {:component-did-update
(cond (fn [comp]
(and (not @to-hide) show?) (let [new-argv (rest (reagent/argv comp))
(animation/start show? (last new-argv)]
(animation/timing (cond
anim-opacity (and (not @to-hide) show?)
{:toValue 1 (animation/start
:duration 200 (animation/timing
:easing (.-ease (animation/easing)) anim-opacity
:useNativeDriver true}) {:toValue 1
#(reset! to-hide true)) :duration 200
:easing (.-ease (animation/easing))
:useNativeDriver true})
#(reset! to-hide true))
(and @to-hide (not show?)) (and @to-hide (not show?))
(animation/start (animation/start
(animation/timing (animation/timing
anim-opacity anim-opacity
{:toValue 0 {:toValue 0
:duration 200 :duration 200
:easing (.-ease (animation/easing)) :easing (.-ease (animation/easing))
:useNativeDriver true}) :useNativeDriver true})
#(reset! to-hide false))))} #(reset! to-hide false)))))
[react/animated-view
{:style (cond-> {:flex 1 :reagent-render
:align-self :stretch (fn [header-in-toolbar has-nav? _]
:opacity anim-opacity} [react/animated-view
(false? has-nav?) {:style (cond-> {:flex 1
(assoc :margin-left -40 :margin-right 40))} :align-self :stretch
header-in-toolbar])) :opacity anim-opacity}
(false? has-nav?)
(assoc :margin-left -40 :margin-right 40))}
header-in-toolbar])})))
(defn on-viewable-items-changed [threshold interporlation-step] (defn on-viewable-items-changed [threshold interporlation-step]
(fn [info] (fn [info]
@ -95,8 +102,8 @@
;; wrapped header and content form the data prop of flat-list ;; wrapped header and content form the data prop of flat-list
;; list-ref - atom - a reference to flat-list for the purpose of invoking its ;; list-ref - atom - a reference to flat-list for the purpose of invoking its
;; methods ;; methods
(defview flat-list-with-large-header [header content list-ref] (views/defview flat-list-with-large-header [header content list-ref]
(letsubs [window-width [:dimensions/window-width]] (views/letsubs [window-width [:dimensions/window-width]]
{:component-did-mount #(do (reset! hidden 0) (reset! shown 100) {:component-did-mount #(do (reset! hidden 0) (reset! shown 100)
(reset! minimized-header-visible? false) (reset! minimized-header-visible? false)
(vreset! initial-on-show-done? false))} (vreset! initial-on-show-done? false))}
@ -136,7 +143,7 @@
:data wrapped-data :data wrapped-data
:initial-num-to-render 3 :initial-num-to-render 3
:ref #(reset! list-ref %) :ref #(reset! list-ref %)
:render-fn (fn [item idx] item) :render-fn list.views/flat-list-generic-render-fn
:key-fn (fn [item idx] (str idx)) :key-fn (fn [item idx] (str idx))
:on-scroll-begin-drag #(when (false? @initial-on-show-done?) :on-scroll-begin-drag #(when (false? @initial-on-show-done?)
(vreset! initial-on-show-done? true)) (vreset! initial-on-show-done? true))

8
src/status_im/ui/components/list/views.cljs
View File

@ -25,6 +25,7 @@
[status-im.ui.components.checkbox.view :as checkbox] [status-im.ui.components.checkbox.view :as checkbox]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.list.styles :as styles] [status-im.ui.components.list.styles :as styles]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.screens.home.animations.responder :as responder] [status-im.ui.screens.home.animations.responder :as responder]
@ -224,6 +225,13 @@
props props
{:data (wrap-data data)})]) {:data (wrap-data data)})])
(defn flat-list-generic-render-fn [item _]
(cond
(map? item) [list-item/list-item item]
(vector? item) item
(nil? item) nil
:else [item]))
(defn- wrap-render-section-header-fn [f] (defn- wrap-render-section-header-fn [f]
(fn [data] (fn [data]
(let [section (.-section data)] (let [section (.-section data)]

180
src/status_im/ui/components/list_item/styles.cljs
View File

@ -1,24 +1,176 @@
(ns status-im.ui.components.list-item.styles (ns status-im.ui.components.list-item.styles
(:require [status-im.ui.components.colors :as colors])) (:require [status-im.ui.components.colors :as colors]))
(defn container [small?] (defn container [type theme]
{:height (if small? 52 64) {:min-height (cond
(= type :default) 64
(= type :small) 52
(= type :section-header) 40
:else 0)
:flex 1
:flex-direction :row
:justify-content :flex-start
:padding-horizontal 16
:background-color (if (= theme :blue)
colors/blue
colors/white)
:padding-top (cond
(= type :section-header) 14
:else 10)
:padding-bottom (cond
(= type :section-header) 4
:else 10)
:align-items :center})
(def icon-column-container
{:margin-right 14
:padding-vertical 2
:justify-content :flex-start
:max-width 40
:align-items :center :align-items :center
:flex-direction :row :align-self :stretch})
:background-color :white})
(defn title [small? subtitle] (defn icon-container [color]
(merge (when-not small? {:border-radius 20
{:typography :title}) :width 40
(when subtitle :height 40
{:typography :main-medium}))) :align-items :center
:justify-content :center
:background-color (or color colors/blue-light)})
(def subtitle (defn icon [color]
{:margin-top 4 {:color (or color colors/blue)
:color colors/gray}) :font-size 16})
(def accessory-text (defn title-column-container [accessories?]
{:color colors/gray}) {:margin-right (if accessories? 16 0)
:flex 1
:justify-content :center
:align-items :flex-start
:align-self :stretch})
(def title-row-container
{:min-height 22
:flex-direction :row
:justify-content :flex-start
:align-self :stretch})
(defn title-prefix-icon-container
[title-prefix-height title-prefix-width]
(merge
{:width 16
:height 16
:justify-content :center
:margin-top (if (not title-prefix-height) 4 0)
:align-items :center}
(when title-prefix-width
{:width title-prefix-width})
(when title-prefix-height
{:height title-prefix-height})))
(defn title-prefix-text [type theme icon? subtitle
content title-prefix-width disabled?]
(merge {:margin-left (if icon? 2 0)
:align-self :stretch
;; we are doing the following to achieve pixel perfection
;; as reasonably possible as it can be, and achieve the
;; intent of the design spec
:line-height 22}
(when (= type :default)
(if (or subtitle content)
{:typography :main-medium
:line-height 22}
{:typography :title
:line-height 20}))
(when title-prefix-width
{:width title-prefix-width})
(if disabled?
{:color colors/gray}
(case theme
:blue {:color colors/white}
:action-destructive {:color colors/red}
:action {:color colors/blue}
{}))))
(defn title [type theme icon? title-prefix subtitle
content title-row-accessory disabled?
title-color-override]
(merge {:margin-left (if icon? 2 0)
:flex 1
:align-self :stretch
;; we are doing the following to achieve pixel perfection
;; as reasonably possible as it can be, and achieve the
;; intent of the design spec
:line-height 22}
(when (= type :default)
(if (or subtitle content)
{:typography :main-medium
:line-height 22}
{:typography :title
:line-height 20}))
(when title-prefix
{:margin-left (if (string? title-prefix) 0 2)})
(when title-row-accessory
{:margin-right 16})
(if (or disabled? (= :section-header type))
{:color colors/gray}
;; else
(if title-color-override
{:color title-color-override}
;; else
(case theme
:blue {:color colors/white}
:action-destructive {:color colors/red}
:action {:color colors/blue}
{})))))
(def title-row-accessory-container
{:margin-top 2
:align-self :stretch})
(def subtitle-row-container
{:min-height 22
:flex-direction :row
:justify-content :flex-start
:align-self :stretch})
(defn subtitle [icon? theme subtitle-row-accessory]
(cond-> {:margin-left (if icon? 2 0)
:flex 1
:align-self :stretch
:color colors/gray
;; we are doing the following to achieve pixel perfection
;; as reasonably possible as it can be, and achieve the
;; intent of the design spec
:line-height 22}
(= :blue theme)
(assoc :color (colors/alpha colors/blue-light 0.6))
subtitle-row-accessory
(assoc :margin-right 16)))
(def subtitle-row-accessory-container
{:justify-content :flex-end
:align-self :stretch})
(def accessories-container
{:align-self :stretch
:flex-direction :row
:align-items :center
:justify-content :flex-start})
(defn accessory-text [theme]
{:color (if (= theme :blue)
(colors/alpha colors/blue-light 0.6)
colors/gray)
;; we are doing the following to achieve pixel perfection
;; as reasonably possible as it can be, and achieve the
;; intent of the design spec
:line-height 22})
(defn radius [size] (/ size 2)) (defn radius [size] (/ size 2))

439
src/status_im/ui/components/list_item/views.cljs
View File

@ -1,81 +1,378 @@
(ns status-im.ui.components.list-item.views (ns status-im.ui.components.list-item.views
(:require [status-im.ui.components.colors :as colors] (:require [clojure.string :as string]
[reagent.core :as reagent]
[status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.list-item.styles :as styles] [status-im.ui.components.list-item.styles :as styles]
[status-im.utils.image :as utils.image]
[status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.components.action-button.styles :as st])) [status-im.ui.screens.profile.db :as profile.db]))
; type - optional :default , :small (def divider
[react/view {:height 1 :background-color colors/gray-lighter}])
; accessories - optional vector of :chevron, :check, :more or component or string (defn stringify [keyword-or-number]
(cond
(string? keyword-or-number)
keyword-or-number
; theme - optional :default, :wallet, :action, :action-red (and (qualified-keyword? keyword-or-number)
(= "t" (namespace keyword-or-number)))
(i18n/label keyword-or-number)
(defn list-item [{:keys [title subtitle accessories image image-path icon type theme on-press error content] :or {type :default theme :default}}] (and (qualified-keyword? keyword-or-number)
(let [small? (= :small type)] (not= "t" (namespace keyword-or-number)))
[react/touchable-highlight {:on-press on-press :disabled (not on-press)} (str (namespace keyword-or-number) "/" (name keyword-or-number))
[react/view {:style (styles/container small?)}
;;Image (simple-keyword? keyword-or-number)
(when image (name keyword-or-number)
[react/view {:margin-left 16}
(if (vector? image) (number? keyword-or-number)
image (str keyword-or-number)
[image])])
;;Icon :else nil))
(when icon
[react/view {:margin-left 16} (defn- icon-column [icon theme disabled?]
[react/view (st/action-button-icon-container (when (= theme :action-red) colors/red-transparent-10)) [react/view styles/icon-column-container
[icons/icon icon (if (= theme :action-red) st/action-button-label-red st/action-button-label)]]]) (cond
(when image-path (vector? icon)
[react/view {:margin-left 16} icon
[react/image {:source (utils.image/source image-path)
:style (styles/photo 40)}]]) (and (qualified-keyword? icon)
;;Title (= "main-icons" (namespace icon)))
(when title (let [colors
[react/view {:style {:margin-left 16 :margin-right 16 :flex 1 :min-width 50}} (if disabled?
[react/text {:style (merge (styles/title small? subtitle) {:container colors/gray-lighter
(when (= theme :action) st/action-button-label) :icon colors/gray-transparent-40}
(when (= theme :action-red) st/action-button-label-red)) (case theme
:number-of-lines 1 :action-destructive
:ellipsize-mode :tail} {:container colors/red-light
title] :icon colors/red}
;;Subtitle
(when subtitle :blue
[react/text {:style styles/subtitle {:container colors/white-transparent-10
:number-of-lines 1 :icon colors/white}
{:container nil
:icon nil}))]
[react/view (styles/icon-container (:container colors))
[icons/icon icon (styles/icon (:icon colors))]])
(and (string? icon)
(profile.db/base64-encoded-image-path? icon))
[react/image {:source {:uri icon}
:resize-mode :cover
:style (styles/photo 40)}]
:else [icon])])
(defn- title-row [{:keys [title title-color-override title-prefix title-prefix-width
title-prefix-height title-row-accessory]}
type icon? disabled? theme subtitle content accessories]
[react/view styles/title-row-container
(when title-prefix
(cond
(and (qualified-keyword? title-prefix)
(= "main-icons" (namespace title-prefix)))
[icons/icon title-prefix
(merge
{:color colors/gray
:width 16
:height 16
:container-style
(styles/title-prefix-icon-container
title-prefix-height title-prefix-width)}
(when title-prefix-width
{:width title-prefix-width})
(when title-prefix-height
{:height title-prefix-height}))]
(or (string? title-prefix)
(number? title-prefix)
(keyword? title-prefix))
[react/text {:number-of-lines 1
:ellipsize-mode :tail
:style
(styles/title-prefix-text
type theme icon? subtitle content
title-prefix-width disabled?)}
(if title-prefix-width
(stringify title-prefix)
(str (stringify title-prefix) " "))]
(vector? title-prefix)
title-prefix
:else
[title-prefix]))
(cond
(or (string? title) (keyword? title) (number? title))
[react/text {:number-of-lines 1
:ellipsize-mode :tail
:style
(styles/title
type theme icon? title-prefix subtitle
content title-row-accessory disabled?
title-color-override)}
(stringify title)]
(vector? title)
[react/view {:flex 1}
title]
:else
[react/view {:flex 1}
[title]])
(when title-row-accessory
[react/view styles/title-row-accessory-container title-row-accessory])])
(defn subtitle-row [{:keys [subtitle subtitle-max-lines subtitle-row-accessory]}
icon? theme]
(let [subtitle-row-accessory-width (reagent/atom 0)]
(reagent/create-class
{:render
(fn []
[react/view styles/subtitle-row-container
(cond
(or (string? subtitle) (keyword? subtitle) (number? subtitle))
[react/text {:style
(merge
(styles/subtitle
icon? theme (pos? @subtitle-row-accessory-width)))
:number-of-lines subtitle-max-lines
:ellipsize-mode :tail} :ellipsize-mode :tail}
subtitle])]) (stringify subtitle)]
;;Content
(when content (vector? subtitle)
(if (vector? content) [react/view
content (styles/subtitle icon? theme (pos? @subtitle-row-accessory-width))
[content])) subtitle]
;;Accessories
(for [accessory accessories] :else
(when-not (nil? accessory) [react/view
(with-meta (styles/subtitle icon? theme (pos? @subtitle-row-accessory-width))
(cond [subtitle]])
(= :chevron accessory)
[react/view {:margin-right 8} (when subtitle-row-accessory
[icons/icon :main-icons/next {:color colors/gray-transparent-40}]] [react/view
(= :check accessory) {:style styles/subtitle-row-accessory-container
[react/view {:margin-right 16} :on-layout #(reset!
[icons/icon :main-icons/check {:color colors/gray}]] subtitle-row-accessory-width
(= :more accessory) (-> % .-nativeEvent .-layout .-width))}
[react/view {:margin-right 16} ;; We do this so that the bottom of the component is 12 device px
[icons/icon :main-icons/more]] ;; from bottom of the touchable container, instead of 10.
:else [react/view {:transform [{:translateY -2}]}
[react/view {:margin-right 16 :flex-shrink 1} subtitle-row-accessory]])])})))
(cond
(string? accessory) (defn- title-column [{:keys [title] :as title-row-elements}
[react/text {:style styles/accessory-text :number-of-lines 1} {:keys [subtitle] :as subtitle-row-elements}
accessory] type icon? disabled? theme content accessories]
(vector? accessory) [react/view (styles/title-column-container accessories)
accessory (when title
:else [title-row
[accessory])]) title-row-elements type icon? disabled?
{:key accessory}))) theme subtitle content accessories])
(when error
[tooltip/tooltip error styles/error])]])) (when (and subtitle (= :default type))
[subtitle-row subtitle-row-elements icon? theme])
(when content
[react/view {:margin-left (if icon? 2 0)}
(if (vector? content)
content
[content])])])
(defn- accessories-column [accessories theme]
(let [last-accessory (peek accessories)
last-accessory-is-component (and (not (stringify last-accessory))
(not= :chevron last-accessory))
second-last-accessory (peek (pop accessories))]
(into
[react/view styles/accessories-container]
(for [accessory accessories]
(when-not (nil? accessory)
(with-meta
(cond
(= :chevron accessory)
[icons/icon :main-icons/next
{:container-style {:width 10
:height 16
:align-items :center
:justify-content :center}
:resize-mode :center
:color (if (= theme :blue)
(colors/alpha colors/white 0.4)
colors/gray-transparent-40)}]
(= :check accessory)
[icons/icon :main-icons/check
{:color (if (= theme :blue)
(colors/alpha colors/white 0.4)
colors/gray)}]
(= :more accessory)
[icons/icon :main-icons/more
{:color (if (= theme :blue)
(colors/alpha colors/white 0.4)
colors/black)}]
:else
[react/view (cond-> {:margin-right (if (= accessory last-accessory) 0 16)}
;; `:chevron` container is 10px wide (see up)
;; but the chevron icon itself is 9px aligned in the
;; container to the right - so 1px white-space on left
;; that 1px + 15px margin makes 16px
;; as intended in design spec
(= last-accessory :chevron)
(assoc :margin-right 15))
(cond
(or (string? accessory) (keyword? accessory) (number? accessory))
[react/text {:style (styles/accessory-text theme)
:number-of-lines 1}
(stringify accessory)]
(vector? accessory)
accessory
:else nil)])
{:key accessory}))))))
;; every key is optional - use as needed
;; combination of around 4 related keys are enough for most cases
;; type
;; :default (default), :small, or :section-header
;; - :section-header
;; specifying only these is sufficient
;; {:title "Section title" :type :section-header}
;; optionally set `container-margin-top/bottom`
;; theme
;; :default(default), :blue, :action, :action-destructive
;; container-margin-top
;; container-margin-bottom
;; number - 0 by default
;; usually the first item has top margin
;; the last item has bottom margin
;; icon
;; any one of keyword representing :main-icon/icon, photo-path, component
;; if component make sure to make it 40x40 size
;; title-prefix
;; any one of keyword representing an vector-icon/icon,
;; :main-icons/tiny-icons(16x16) are preferred(when it has 4px :margin-top)
;; any other vector-icon/icon is accepted though(when it is better to
;; specify height(best to keep it <= 20) see related height/width below
;; string, keyword(gets converted to string),
;; number(gets converted to string), or component
;; title-prefix-width
;; title-prefix-height
;; optional width/height for when title/prefix is not a tiny-icon
;; i.e. when icon height/height > 16, or when component
;; do not specify if title-prefix is tiny-icon
;; title
;; any one of string, keyword representing translated string in the form of
;; :t/{translation-key-in-translation-files},
;; keyword(gets converted to string),
;; number(gets converted to string), or
;; component - when component is used best to keep the style similar
;; to `styles/title-row-container` and/or `styles/title`
;; title-color-override
;; colors/color - only occasionally needed, self-explanatory
;; title-row-accessory
;; component - especially made for chat list item, but may serve other
;; purpose in the unlikely future. Wrapper already has 2px :margin-top
;; best to keep it <= 18px high
;; subtitle
;; any one of string, keyword representing translated string in the form of
;; :t/{translation-key-in-translation-files},
;; keyword(gets converted to string),
;; number(gets converted to string), or
;; component - when component is used best to keep the style similar
;; to `styles/subtitle-title-row-container` and/or `styles/subtitle`
;; subtitle-max-lines
;; integer - 1 by default - self-explanatory
;; subtitle-row-accessory
;; component
;; made specially for chat-list to hold unread messages counter
;; content
;; component - to replace entire title-column area
;; TODO - consider removing, as it is redundant now that
;; title/subtitle elements can be component as well
;; just make sure to keep in mind the note made on
;; component case on those keys above
;; accessories
;; vector of :chevron, :check, :more, string, number, keyword or component
;; on-press/on-long-press
;; function - self explanatory
;; error
;; string - error tooltip
;; accessibility-label
;; :keyword - self explanatory
;; disabled?
;; boolean - false by default - self explanatory
(defn list-item
[{:keys [type theme container-margin-top container-margin-bottom
icon title-prefix title-prefix-width title-prefix-height
title title-color-override title-row-accessory
subtitle subtitle-max-lines subtitle-row-accessory
content accessories on-press on-long-press
error accessibility-label disabled?]
:or {type :default
theme :default
disabled? false
container-margin-top 0
container-margin-bottom 0
subtitle-max-lines 1}}]
(let [title-row-elements
{:title title
:title-color-override title-color-override
:title-prefix title-prefix
:title-prefix-width title-prefix-width
:title-prefix-height title-prefix-height
:title-row-accessory title-row-accessory}
subtitle-row-elements
{:subtitle subtitle
:subtitle-max-lines subtitle-max-lines
:subtitle-row-accessory subtitle-row-accessory}]
[react/view {:margin-top container-margin-top
:margin-bottom container-margin-bottom}
[react/touchable-highlight
(cond-> {:on-press on-press
:on-long-press on-long-press
:underlay-color colors/black
:disabled (or (not on-press) disabled?)}
accessibility-label
(assoc :accessibility-label accessibility-label))
[react/view {:style (styles/container type theme)}
(when icon
[icon-column icon theme disabled?])
(when (or title subtitle content)
[title-column
title-row-elements subtitle-row-elements
type icon disabled? theme content accessories])
(when accessories
[accessories-column accessories theme])]]
(when error
[tooltip/tooltip error styles/error])]))

5
src/status_im/ui/components/status_bar/view.cljs
View File

@ -44,6 +44,11 @@
:installations {:type :main} :installations {:type :main}
:transactions-history {:type :main} :transactions-history {:type :main}
:dapps-permissions {:type :main} :dapps-permissions {:type :main}
:privacy-and-security {:type :main}
:language-settings {:type :main}
:notifications-settings {:type :main}
:sync-settings {:type :main}
:advanced-settings {:type :main}
:help-center {:type :main} :help-center {:type :main}
:about-app {:type :main} :about-app {:type :main}
:offline-messaging-settings {:type :main} :offline-messaging-settings {:type :main}

130
src/status_im/ui/screens/about_app/views.cljs
View File

@ -1,109 +1,39 @@
(ns status-im.ui.screens.about-app.views (ns status-im.ui.screens.about-app.views
(:require-macros [status-im.utils.views :as views] (:require-macros [status-im.utils.views :as views])
[status-im.utils.views :refer [defview letsubs]]) (:require [re-frame.core :as re-frame]
(:require [status-im.ui.components.toolbar.view :as toolbar] [status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.copyable-text :as copyable-text]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.status-bar.view :as status-bar] [status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.toolbar.view :as toolbar]))
[status-im.ui.screens.about-app.styles :as styles]
[status-im.i18n :as i18n]
[status-im.transport.utils :as transport.utils]
[status-im.ui.components.colors :as colors]
[status-im.ui.screens.profile.components.views :as profile.components]
[re-frame.core :as re-frame]))
(defn app-info->json [app-version peers mailserver node-info node-version] (defn- data [app-version node-version]
(js/JSON.stringify [{:type :small
(clj->js :title (i18n/label :t/privacy-policy)
{:client {:app-version app-version :accessibility-label :privacy-policy
:mailserver mailserver :on-press
:node-info node-info #(re-frame/dispatch
:node-version node-version} [:privacy-policy/privacy-policy-button-pressed])
:peers peers}) :accessories [:chevron]}
nil [copyable-text/copyable-text-view
4)) {:copied-text (str app-version "; " node-version)}
[list-item/list-item
(defview learn-more-sheet [] {:type :small
(letsubs [{:keys [title content]} [:bottom-sheet/options]] :title (i18n/label :t/version)
[react/view {:style {:padding 16}} :accessibility-label :version
[react/view {:style {:align-items :center :flex-direction :row :margin-bottom 16}} :accessories [(str app-version "; " node-version)]}]]])
[vector-icons/icon :main-icons/info {:color colors/blue
:container-style {:margin-right 13}}]
[react/text {:style styles/learn-more-title} title]]
[react/text {:style styles/learn-more-text} content]]))
(def learn-more
{:content learn-more-sheet
:content-height 180})
(defn peer-view [{:keys [enode]}]
(let [[enode-id ip-address port] (transport.utils/extract-url-components enode)]
^{:key enode}
[react/touchable-highlight {:style styles/peer-view
:on-press #(react/copy-to-clipboard enode)}
[react/view
[react/view
[react/text {:style styles/peer-text} (str "id: " enode-id)]]
[react/view
[react/text {:style styles/peer-text} (str "ip: " ip-address)]]
[react/view
[react/text {:style styles/peer-text} (str "port: " port)]]]]))
(defn peers-summary-section [peers]
(mapv peer-view peers))
(views/defview about-app [] (views/defview about-app []
(views/letsubs [app-version [:get-app-short-version] (views/letsubs [app-version [:get-app-short-version]
peers [:peers-summary]
mailserver [:mailserver/current-id]
node-info [:about-app/node-info]
node-version [:get-app-node-version]] node-version [:get-app-node-version]]
[react/view {:flex 1} [react/view {:flex 1 :background-color colors/white}
[status-bar/status-bar] [status-bar/status-bar]
[toolbar/simple-toolbar (i18n/label :t/about-app)] [toolbar/simple-toolbar
[react/scroll-view (i18n/label :t/about-app)]
[react/view [list/flat-list
[profile.components/settings-item-separator] {:data (data app-version node-version)
:key-fn (fn [_ i] (str i))
[profile.components/settings-item :render-fn list/flat-list-generic-render-fn}]]))
{:label-kw :t/privacy-policy
:accessibility-label :privacy-policy
:action-fn #(re-frame/dispatch [:privacy-policy/privacy-policy-button-pressed])}]
(when status-im.utils.platform/ios?
[profile.components/settings-item-separator])
[profile.components/settings-item
{:item-text (i18n/label :t/version {:version app-version})
:action-fn #(react/copy-to-clipboard app-version)
:accessibility-label :version
:hide-arrow? true}]
(when status-im.utils.platform/ios?
[profile.components/settings-item-separator])
[profile.components/settings-item
{:item-text node-version
:action-fn #(react/copy-to-clipboard node-version)
:accessibility-label :version
:hide-arrow? true}]
[profile.components/settings-item
{:item-text mailserver
:action-fn #(react/copy-to-clipboard (str mailserver))
:accessibility-label :mailserver
:hide-arrow? true}]
[profile.components/settings-item
{:item-text (i18n/label :t/copy-info)
:action-fn #(react/copy-to-clipboard
(app-info->json
app-version
peers
mailserver
node-info
node-version))
:accessibility-label :copy-to-clipboard
:hide-arrow? true}]
[react/view {:style styles/about-title}
[react/text {:style styles/about-title-text} (i18n/label :t/node-info)]]
[peer-view {:enode (:enode node-info)}]
[react/view {:style styles/about-title}
[react/text {:style styles/about-title-text} (i18n/label :t/peers)]]
[react/view
(map peer-view peers)]]]]))

173
src/status_im/ui/screens/advanced_settings/views.cljs Normal file
View File

@ -0,0 +1,173 @@
(ns status-im.ui.screens.advanced-settings.views
(:require-macros [status-im.utils.views :as views])
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.list-item.views :as list-item]
[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]))
(defn- normal-mode-settings-data [network-name current-log-level
current-fleet dev-mode?]
[{:type :small
:title :t/network
:accessibility-label :network-button
:container-margin-top 8
:on-press
#(re-frame/dispatch [:navigate-to :network-settings])
:accessories [network-name :chevron]}
;; TODO - uncomment when implemented
;; {:type :small
;; :title :t/les-ulc
;; :accessibility-label :log-level-settings-button
;; :accessories [:t/ulc-enabled :chevron]}
{:type :small
:title :t/log-level
:accessibility-label :log-level-settings-button
:on-press
#(re-frame/dispatch [:navigate-to :log-level-settings])
:accessories [current-log-level :chevron]}
{:type :small
:title :t/fleet
:accessibility-label :fleet-settings-button
:on-press
#(re-frame/dispatch [:navigate-to :fleet-settings])
:accessories [current-fleet :chevron]}
{:type :small
:title :t/bootnodes
:accessibility-label :bootnodes-settings-button
:on-press
#(re-frame/dispatch [:navigate-to :bootnodes-settings])
:accessories [:chevron]}
{:type :small
:title :t/dev-mode
:accessibility-label :dev-mode-settings-switch
:container-margin-bottom 8
:on-press
#(re-frame/dispatch
[:multiaccounts.ui/dev-mode-switched (not dev-mode?)])
:accessories
[[react/switch
{:track-color #js {:true colors/blue :false nil}
:value dev-mode?
:on-value-change
#(re-frame/dispatch
[:multiaccounts.ui/dev-mode-switched (not dev-mode?)])
:disabled false}]]}
list-item/divider])
(defn- dev-mode-settings-data [settings chaos-mode? supported-biometric-auth]
[{:container-margin-top 8
:type :section-header
:title :t/dev-mode-settings}
{:type :small
:title :t/datasync
:accessibility-label :datasync-settings-switch
:accessories
[[react/switch
{:track-color #js {:true colors/blue :false nil}
:value (boolean (:datasync? settings))
:on-value-change
#(re-frame/dispatch [:multiaccounts.ui/toggle-datasync %])
:disabled false}]]
:on-press
#(re-frame/dispatch
[:multiaccounts.ui/toggle-datasync
((complement boolean) (:datasync? settings))])}
{:type :small
:title :t/v1-messages
:accessibility-label :v1-messages-settings-switch
:accessories
[[react/switch
{:track-color #js {:true colors/blue :false nil}
:value (boolean (:v1-messages? settings))
:on-value-change
#(re-frame/dispatch [:multiaccounts.ui/toggle-v1-messages %])
:disabled false}]]
:on-press
#(re-frame/dispatch
[:multiaccounts.ui/toggle-v1-messages
((complement boolean) (:v1-messages? settings))])}
{:type :small
:title :t/disable-discovery-topic
:accessibility-label :discovery-topic-settings-switch
:accessories
[[react/switch
{:track-color #js {:true colors/blue :false nil}
:value (boolean (:disable-discovery-topic? settings))
:on-value-change
#(re-frame/dispatch [:multiaccounts.ui/toggle-disable-discovery-topic %])
:disabled false}]]
:on-press
#(re-frame/dispatch
[:multiaccounts.ui/toggle-disable-discovery-topic
((complement boolean) (:disable-discovery-topic? settings))])}
{:type :small
:title :t/chaos-mode
:accessibility-label :chaos-mode-settings-switch
:on-press
#(re-frame/dispatch
[:multiaccounts.ui/chaos-mode-switched (not chaos-mode?)])
:accessories
[[react/switch
{:track-color #js {:true colors/blue :false nil}
:value chaos-mode?
:on-value-change
#(re-frame/dispatch
[:multiaccounts.ui/chaos-mode-switched (not chaos-mode?)])
:disabled false}]]}
{:type :small
:title :t/biometric-auth-setting-label
:container-margin-bottom 8
:accessibility-label :biometric-auth-settings-switch
:disabled? (not (some? supported-biometric-auth))
:accessories
[[react/switch
{:track-color #js {:true colors/blue :false nil}
:value (boolean (:biometric-auth? settings))
:on-value-change
#(re-frame/dispatch [:multiaccounts.ui/biometric-auth-switched %])
:disabled (not (some? supported-biometric-auth))}]]
:on-press
#(re-frame/dispatch
[:multiaccounts.ui/biometric-auth-switched
((complement boolean) (:biometric-auth? settings))])}
[react/view {:height 24}]])
(defn- flat-list-data [network-name current-log-level current-fleet
dev-mode? settings chaos-mode? supported-biometric-auth]
(if dev-mode?
(into
(normal-mode-settings-data
network-name current-log-level current-fleet dev-mode?)
(dev-mode-settings-data
settings chaos-mode? supported-biometric-auth))
;; else
(normal-mode-settings-data
network-name current-log-level current-fleet dev-mode?)))
(views/defview advanced-settings []
(views/letsubs [{:keys
[chaos-mode?
dev-mode?
settings]
:as current-multiaccount} [:multiaccount]
settings [:multiaccount-settings]
network-name [:network-name]
current-log-level [:settings/current-log-level]
current-fleet [:settings/current-fleet]
supported-biometric-auth [:supported-biometric-auth]]
[react/view {:flex 1 :background-color colors/white}
[status-bar/status-bar]
[toolbar/simple-toolbar
(i18n/label :t/advanced)]
[list/flat-list
{:data (flat-list-data
network-name current-log-level
current-fleet dev-mode? settings
chaos-mode? supported-biometric-auth)
:key-fn (fn [_ i] (str i))
:render-fn list/flat-list-generic-render-fn}]]))

4
src/status_im/ui/screens/browser/open_dapp/views.cljs
View File

@ -27,8 +27,8 @@
[list-item/list-item [list-item/list-item
{:on-press #(re-frame/dispatch [:browser.ui/browser-item-selected browser-id]) {:on-press #(re-frame/dispatch [:browser.ui/browser-item-selected browser-id])
:title name :title name
:subtitle (or url (i18n/label :t/dapp)) :subtitle (or url :t/dapp)
:image [react/view styles/browser-icon-container :icon [react/view styles/browser-icon-container
[vector-icons/icon :main-icons/browser {:color colors/gray}]]}]]) [vector-icons/icon :main-icons/browser {:color colors/gray}]]}]])
(def dapp-image-data {:image (resources/get-image :dapp-store) :width 768 :height 333}) (def dapp-image-data {:image (resources/get-image :dapp-store) :width 768 :height 333})

6
src/status_im/ui/screens/dapps_permissions/views.cljs
View File

@ -21,12 +21,12 @@
{:title dapp {:title dapp
:accessories [:chevron] :accessories [:chevron]
:on-press #(re-frame/dispatch [:navigate-to :manage-dapps-permissions {:dapp dapp :permissions permissions}]) :on-press #(re-frame/dispatch [:navigate-to :manage-dapps-permissions {:dapp dapp :permissions permissions}])
:image d-icon}) :icon d-icon})
(defn prepare-items-manage [permission] (defn prepare-items-manage [permission]
{:title (case permission {:title (case permission
constants/dapp-permission-web3 (i18n/label :t/wallet) constants/dapp-permission-web3 :t/wallet
constants/dapp-permission-contact-code (i18n/label :t/contact-code)) constants/dapp-permission-contact-code :t/contact-code)
:type :small :type :small
:accessories [:check]}) :accessories [:check]})

63
src/status_im/ui/screens/help_center/views.cljs
View File

@ -1,35 +1,46 @@
(ns status-im.ui.screens.help-center.views (ns status-im.ui.screens.help-center.views
(:require-macros [status-im.utils.views :as views])
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.status-bar.view :as status-bar] [status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.help-center.styles :as styles] [status-im.ui.components.list.views :as list]
[status-im.utils.platform :as platform] [status-im.ui.components.colors :as colors]
[status-im.ui.screens.profile.components.views :as profile.components])) [status-im.utils.platform :as platform]))
(views/defview help-center [] (def data
[react/view styles/wrapper [{:type :small
:title :t/faq
:accessibility-label :faq-button
:on-press
#(.openURL (react/linking)
(if platform/desktop?
"https://status.im/docs/FAQ-desktop.html"
"https://status.im/docs/FAQs.html"))
:accessories [:chevron]}
{:type :small
:title :t/submit-bug
:accessibility-label :submit-bug-button
:on-press
#(re-frame/dispatch [:logging.ui/send-logs-pressed])
:accessories [:chevron]}
{:type :small
:title :t/request-feature
:accessibility-label :request-a-feature-button
:on-press
#(re-frame/dispatch [:chat.ui/start-public-chat
(if platform/desktop?
"status-desktop"
"status")
{:navigation-reset? false}])
:accessories [:chevron]}])
(defn help-center []
[react/view {:flex 1 :background-color colors/white}
[status-bar/status-bar] [status-bar/status-bar]
[toolbar/simple-toolbar [toolbar/simple-toolbar
(i18n/label :t/help-center)] (i18n/label :t/need-help)]
[react/scroll-view [list/flat-list
[react/view {:data data
[profile.components/settings-item-separator] :key-fn (fn [_ i] (str i))
[profile.components/settings-item :render-fn list/flat-list-generic-render-fn}]])
{:label-kw :t/faq
:accessibility-label :faq-button
:action-fn #(.openURL (react/linking)
(if platform/desktop?
"https://status.im/docs/FAQ-desktop.html"
"https://status.im/docs/FAQs.html"))}]
[profile.components/settings-item-separator]
[profile.components/settings-item
{:label-kw :t/ask-in-status
:accessibility-label :submit-bug-button
:action-fn #(re-frame/dispatch [:chat.ui/start-public-chat
(if platform/desktop?
"status-desktop"
"status")
{:navigation-reset? false}])}]]]])

12
src/status_im/ui/screens/language_settings/views.cljs Normal file
View File

@ -0,0 +1,12 @@
(ns status-im.ui.screens.language-settings.views
(:require [status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[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]))
(defn language-settings []
[react/view {:flex 1 :background-color colors/white}
[status-bar/status-bar]
[toolbar/simple-toolbar
(i18n/label :t/language)]])

13
src/status_im/ui/screens/notifications_settings/views.cljs Normal file
View File

@ -0,0 +1,13 @@
(ns status-im.ui.screens.notifications-settings.views
(:require [status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[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]))
(defn notifications-settings []
[react/view {:flex 1 :background-color colors/white}
[status-bar/status-bar]
[toolbar/simple-toolbar
(i18n/label :t/notifications)]])

83
src/status_im/ui/screens/privacy_and_security_settings/views.cljs Normal file
View File

@ -0,0 +1,83 @@
(ns status-im.ui.screens.privacy-and-security-settings.views
(:require-macros [status-im.utils.views :as views])
(:require [clojure.string :as string]
[re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.common.common :as components.common]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.list-item.views :as list-item]
[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]))
(defn- list-data [show-backup-seed? settings]
[{:type :section-header
:title :t/security
:container-margin-top 6}
{:type :small
:title :t/back-up-seed-phrase
:accessibility-label :back-up-recovery-phrase-button
;; TODO - remove container bottom margin
;; when items below are implemented
:container-margin-bottom 8
:on-press
#(re-frame/dispatch [:navigate-to :backup-seed])
:accessories
[(when show-backup-seed? [components.common/counter {:size 22} 1])
:chevron]}
;; TODO - uncomment when implemented
;; {:type :small
;; :title :t/change-password
;; :accessories [:chevron]}
;; {:type :small
;; :title :t/change-passcode
;; :accessories [:chevron]
;; :container-margin-bottom 8}
list-item/divider
{:container-margin-top 8
:type :section-header
:title :t/privacy}
{:type :small
:title :t/set-dapp-access-permissions
:on-press #(re-frame/dispatch [:navigate-to :dapps-permissions])
:accessibility-label :dapps-permissions-button
:accessories [:chevron]}
{:type :small
:title :t/hide-content-when-switching-apps
:accessories
[[react/switch
{:track-color #js {:true colors/blue :false nil}
:value (boolean (boolean (:preview-privacy? settings)))
:on-value-change
#(re-frame/dispatch
[:multiaccounts.ui/preview-privacy-mode-switched %])
:disabled false}]]
:on-press
#(re-frame/dispatch
[:multiaccounts.ui/preview-privacy-mode-switched
((complement boolean) (:preview-privacy? settings))])
:container-margin-bottom 8}
list-item/divider
;; TODO - uncomment when implemented
(comment
{:container-margin-top 8
:type :small
:title :t/delete-my-account
:container-margin-bottom 24
:theme :action-destructive})])
(views/defview privacy-and-security []
(views/letsubs [{:keys [seed-backed-up? mnemonic]} [:multiaccount]
settings [:multiaccount-settings]]
(let [show-backup-seed? (and (not seed-backed-up?)
(not (string/blank? mnemonic)))
data (list-data show-backup-seed? settings)]
[react/view {:flex 1 :background-color colors/white}
[status-bar/status-bar]
[toolbar/simple-toolbar
(i18n/label :t/privacy-and-security)]
[list/flat-list
{:data data
:key-fn (fn [_ i] (str i))
:render-fn list/flat-list-generic-render-fn}]])))

6
src/status_im/ui/screens/profile/components/styles.cljs
View File

@ -15,9 +15,9 @@
:justify-content :center}) :justify-content :center})
(defstyle profile-name-text (defstyle profile-name-text
{:typography :header {:typography :header
:line-height 28 :line-height 28
:text-align :left}) :text-align :left})
(defstyle profile-name-text-with-subtitle (defstyle profile-name-text-with-subtitle
{:margin-vertical 5 {:margin-vertical 5

5
src/status_im/ui/screens/profile/components/views.cljs
View File

@ -34,7 +34,10 @@
[react/view (if with-subtitle? styles/profile-header-name-container-with-subtitle [react/view (if with-subtitle? styles/profile-header-name-container-with-subtitle
styles/profile-header-name-container) styles/profile-header-name-container)
[react/text {:style (if with-subtitle? styles/profile-name-text-with-subtitle [react/text {:style (if with-subtitle? styles/profile-name-text-with-subtitle
styles/profile-name-text)} styles/profile-name-text)
:number-of-lines 2
:ellipsize-mode :tail}
(multiaccounts/displayed-name contact)] (multiaccounts/displayed-name contact)]
(when with-subtitle? (when with-subtitle?
[react/text {:style styles/profile-three-words [react/text {:style styles/profile-three-words

358
src/status_im/ui/screens/profile/user/views.cljs
View File

@ -1,16 +1,18 @@
(ns status-im.ui.screens.profile.user.views (ns status-im.ui.screens.profile.user.views
(:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require-macros [status-im.utils.views :as views])
(:require [clojure.string :as string] (:require [clojure.string :as string]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ethereum.stateofus :as stateofus]
[status-im.multiaccounts.core :as multiaccounts] [status-im.multiaccounts.core :as multiaccounts]
[status-im.ui.components.bottom-bar.styles :as tabs.styles]
[status-im.ui.components.button.view :as button] [status-im.ui.components.button.view :as button]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.common.common :as components.common] [status-im.ui.components.common.common :as components.common]
[status-im.ui.components.copyable-text :as copyable-text] [status-im.ui.components.copyable-text :as copyable-text]
[status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.large-toolbar :as large-toolbar] [status-im.ui.components.large-toolbar :as large-toolbar]
[status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.list-selection :as list-selection] [status-im.ui.components.list-selection :as list-selection]
[status-im.ui.components.list.views :as list.views] [status-im.ui.components.list.views :as list.views]
[status-im.ui.components.qr-code-viewer.views :as qr-code-viewer] [status-im.ui.components.qr-code-viewer.views :as qr-code-viewer]
@ -20,16 +22,13 @@
[status-im.ui.screens.chat.photos :as photos] [status-im.ui.screens.chat.photos :as photos]
[status-im.ui.screens.profile.components.views :as profile.components] [status-im.ui.screens.profile.components.views :as profile.components]
[status-im.ui.screens.profile.user.styles :as styles] [status-im.ui.screens.profile.user.styles :as styles]
[status-im.utils.config :as config]
[status-im.utils.identicon :as identicon] [status-im.utils.identicon :as identicon]
[status-im.utils.platform :as platform] [status-im.utils.universal-links.core :as universal-links]))
[status-im.utils.universal-links.core :as universal-links]
[status-im.ethereum.stateofus :as stateofus]))
(defview share-chat-key [] (views/defview share-chat-key []
(letsubs [{:keys [address]} [:popover/popover] (views/letsubs [{:keys [address]} [:popover/popover]
window-width [:dimensions/window-width] window-width [:dimensions/window-width]
{:keys [names preferred-name]} [:ens.main/screen]] {:keys [names preferred-name]} [:ens.main/screen]]
(let [username (stateofus/username preferred-name) (let [username (stateofus/username preferred-name)
qr-width (- window-width 128) qr-width (- window-width 128)
name (or username preferred-name) name (or username preferred-name)
@ -40,8 +39,9 @@
(when (seq names) (when (seq names)
[react/view [react/view
[copyable-text/copyable-text-view [copyable-text/copyable-text-view
{:label :t/ens-usernames {:label :t/ens-usernames
:copied-text preferred-name} :container-style {:margin-top 12 :margin-bottom 4}
:copied-text preferred-name}
[react/nested-text [react/nested-text
{:style {:line-height 22 :font-size 15 {:style {:line-height 22 :font-size 15
:font-family "monospace"} :font-family "monospace"}
@ -51,8 +51,9 @@
[react/view {:height 1 :margin-top 12 :margin-horizontal -16 [react/view {:height 1 :margin-top 12 :margin-horizontal -16
:background-color colors/gray-lighter}]]) :background-color colors/gray-lighter}]])
[copyable-text/copyable-text-view [copyable-text/copyable-text-view
{:label :t/chat-key {:label :t/chat-key
:copied-text address} :container-style {:margin-top 12 :margin-bottom 4}
:copied-text address}
[react/text {:number-of-lines 1 [react/text {:number-of-lines 1
:ellipsize-mode :middle :ellipsize-mode :middle
:accessibility-label :chat-key :accessibility-label :chat-key
@ -67,195 +68,6 @@
:style {:height 44 :margin-horizontal 0} :style {:height 44 :margin-horizontal 0}
:accessibility-label :share-my-contact-code-button}]]]]))) :accessibility-label :share-my-contact-code-button}]]]])))
(defn- my-profile-settings [{:keys [seed-backed-up? mnemonic]}
{:keys [settings]}
logged-in?]
(let [show-backup-seed? (and (not seed-backed-up?) (not (string/blank? mnemonic)))]
[react/view
[profile.components/settings-title (i18n/label :t/settings)]
(when (and config/hardwallet-enabled?
platform/android?)
[profile.components/settings-item {:label-kw :t/status-keycard
:accessibility-label :keycard-button
:action-fn #(re-frame/dispatch [:profile.ui/keycard-settings-button-pressed])}])
[profile.components/settings-item {:label-kw :t/notifications
:accessibility-label :notifications-button
:action-fn #(.openURL (react/linking) "app-settings://notification/status-im")}]
[profile.components/settings-item-separator]
[profile.components/settings-item {:label-kw :t/mobile-network-settings
:accessibility-label :notifications-button
:action-fn #(re-frame/dispatch [:navigate-to :mobile-network-settings])}]
(when show-backup-seed?
[profile.components/settings-item-separator])
(when show-backup-seed?
[profile.components/settings-item
{:label-kw :t/backup-your-recovery-phrase
:accessibility-label :back-up-recovery-phrase-button
:action-fn #(re-frame/dispatch [:navigate-to :backup-seed])
:icon-content [components.common/counter {:size 22} 1]}])
[profile.components/settings-item-separator]
[profile.components/settings-item
{:label-kw :t/devices
:action-fn #(re-frame/dispatch [:navigate-to :installations])
:accessibility-label :pairing-settings-button}]
[profile.components/settings-item-separator]
[profile.components/settings-switch-item
{:label-kw :t/preview-privacy
:value (boolean (:preview-privacy? settings))
:action-fn #(re-frame/dispatch [:multiaccounts.ui/preview-privacy-mode-switched %])}]
[profile.components/settings-item-separator]
[profile.components/settings-item
{:label-kw :t/dapps-permissions
:accessibility-label :dapps-permissions-button
:action-fn #(re-frame/dispatch [:navigate-to :dapps-permissions])}]
[profile.components/settings-item-separator]
[profile.components/settings-item
{:label-kw :t/need-help
:accessibility-label :help-button
:action-fn #(re-frame/dispatch [:navigate-to :help-center])}]
[profile.components/settings-item-separator]
[profile.components/settings-item
{:label-kw :t/about-app
:accessibility-label :about-button
:action-fn #(re-frame/dispatch [:navigate-to :about-app])}]
[profile.components/settings-item-separator]
[react/view styles/my-profile-settings-logout-wrapper
[react/view styles/my-profile-settings-logout
[profile.components/settings-item {:label-kw :t/logout
:accessibility-label :log-out-button
:destructive? true
:hide-arrow? true
:active? logged-in?
:action-fn #(re-frame/dispatch [:multiaccounts.logout.ui/logout-pressed])}]]]]))
(defview advanced-settings
[{:keys [chaos-mode? dev-mode? settings]} network-name on-show supported-biometric-auth]
{:component-did-mount on-show}
[react/view
(when dev-mode?
[profile.components/settings-item
{:label-kw :t/network
:value network-name
:action-fn #(re-frame/dispatch [:navigate-to :network-settings])
:accessibility-label :network-button}])
[profile.components/settings-item-separator]
[profile.components/settings-item
{:label-kw :t/offline-messaging
:action-fn #(re-frame/dispatch [:navigate-to :offline-messaging-settings])
:accessibility-label :offline-messages-settings-button}]
[profile.components/settings-item-separator]
[profile.components/settings-item
{:label-kw :t/log-level
:action-fn #(re-frame/dispatch [:navigate-to :log-level-settings])
:accessibility-label :log-level-settings-button}]
(when dev-mode?
[react/view styles/my-profile-settings-send-logs-wrapper
[react/view styles/my-profile-settings-send-logs
[profile.components/settings-item {:label-kw :t/send-logs
:destructive? true
:hide-arrow? true
:action-fn #(re-frame/dispatch [:logging.ui/send-logs-pressed])}]]])
[profile.components/settings-item-separator]
[profile.components/settings-item
{:label-kw :t/fleet
:action-fn #(re-frame/dispatch [:navigate-to :fleet-settings])
:accessibility-label :fleet-settings-button}]
(when config/bootnodes-settings-enabled?
[profile.components/settings-item-separator])
(when config/bootnodes-settings-enabled?
[profile.components/settings-item
{:label-kw :t/bootnodes
:action-fn #(re-frame/dispatch [:navigate-to :bootnodes-settings])
:accessibility-label :bootnodes-settings-button}])
(when dev-mode?
[profile.components/settings-item-separator])
(when dev-mode?
[profile.components/settings-switch-item
{:label-kw :t/datasync
:value (:datasync? settings)
:action-fn #(re-frame/dispatch [:multiaccounts.ui/toggle-datasync %])}])
(when dev-mode?
[profile.components/settings-item-separator])
(when dev-mode?
[profile.components/settings-switch-item
{:label-kw :t/v1-messages
:value (:v1-messages? settings)
:action-fn #(re-frame/dispatch [:multiaccounts.ui/toggle-v1-messages %])}])
(when dev-mode?
[profile.components/settings-item-separator])
(when dev-mode?
[profile.components/settings-switch-item
{:label-kw :t/disable-discovery-topic
:value (:disable-discovery-topic? settings)
:action-fn #(re-frame/dispatch [:multiaccounts.ui/toggle-disable-discovery-topic %])}])
[profile.components/settings-item-separator]
[profile.components/settings-switch-item
{:label-kw :t/dev-mode
:value dev-mode?
:action-fn #(re-frame/dispatch [:multiaccounts.ui/dev-mode-switched %])}]
[profile.components/settings-item-separator]
[profile.components/settings-switch-item
{:label-kw :t/chaos-mode
:value chaos-mode?
:action-fn #(re-frame/dispatch [:multiaccounts.ui/chaos-mode-switched %])}]
(when dev-mode?
[profile.components/settings-item-separator]
[profile.components/settings-switch-item
{:label-kw :t/biometric-auth-setting-label
:value (:biometric-auth? settings)
:active? (some? supported-biometric-auth)
:action-fn #(re-frame/dispatch [:multiaccounts.ui/biometric-auth-switched %])}])])
(defview advanced [multiaccount network-name on-show]
(letsubs [advanced? [:my-profile/advanced?]
supported-biometric-auth [:supported-biometric-auth]]
{:component-will-unmount #(re-frame/dispatch [:set :my-profile/advanced? false])}
[react/view {:padding-bottom 16}
[react/touchable-highlight {:on-press #(re-frame/dispatch [:set :my-profile/advanced? (not advanced?)])
:style styles/advanced-button}
[react/view {:style styles/advanced-button-container}
[react/view {:style styles/advanced-button-container-background}
[react/view {:style styles/advanced-button-row}
[react/text {:style styles/advanced-button-label}
(i18n/label :t/advanced)]
[icons/icon (if advanced? :main-icons/dropdown-up :main-icons/dropdown) {:color colors/blue}]]]]]
(when advanced?
[advanced-settings multiaccount network-name on-show supported-biometric-auth])]))
(defn contacts-list-item [active-contacts-count]
[list.views/big-list-item
{:text (i18n/label :t/contacts)
:icon :main-icons/in-contacts
:accessibility-label :notifications-button
:accessory-value active-contacts-count
:action-fn #(re-frame/dispatch [:navigate-to :contacts-list])}])
(defn- ens-item [name {:keys [registrar] :as props}]
[react/view {:style {:margin-top 8}}
[list.views/big-list-item
(let [enabled? (not (nil? registrar))]
(merge
{:text (or name (i18n/label :t/ens-usernames))
:subtext (if enabled?
(if name (i18n/label :t/ens-your-your-name) (i18n/label :t/ens-usernames-details))
(i18n/label :t/ens-network-restriction))
:icon :main-icons/username
:accessibility-label :ens-button}
(if enabled?
{:action-fn #(re-frame/dispatch [:navigate-to :ens-main props])}
{:icon-color colors/gray
:active? false
:hide-chevron? (not enabled?)})))]])
(defn tribute-to-talk-item
[opts]
[list.views/big-list-item
(merge {:text (i18n/label :t/tribute-to-talk)
:accessibility-label :notifications-button
:action-fn #(re-frame/dispatch
[:tribute-to-talk.ui/menu-item-pressed])}
opts)])
(defn- header [{:keys [public-key photo-path] :as account}] (defn- header [{:keys [public-key photo-path] :as account}]
[profile.components/profile-header [profile.components/profile-header
{:contact account {:contact account
@ -283,37 +95,115 @@
:height 24} :height 24}
:handler #(re-frame/dispatch [:show-popover {:view :share-chat-key :address public-key}])}]]) :handler #(re-frame/dispatch [:show-popover {:view :share-chat-key :address public-key}])}]])
(defview my-profile [] (defn tribute-to-talk-item
(letsubs [list-ref (reagent/atom nil) [opts]
{:keys [public-key photo-path preferred-name] [list.views/big-list-item
:as current-multiaccount} [:multiaccount] (merge {:text (i18n/label :t/tribute-to-talk)
network-name [:network-name] :accessibility-label :notifications-button
changed-multiaccount [:my-profile/profile] :action-fn #(re-frame/dispatch
currency [:wallet/currency] [:tribute-to-talk.ui/menu-item-pressed])}
login-data [:multiaccounts/login] opts)])
active-contacts-count [:contacts/active-count]
tribute-to-talk [:tribute-to-talk/profile]
stateofus-registrar [:ens.stateofus/registrar]]
(let [shown-multiaccount (merge current-multiaccount changed-multiaccount)
;; We scroll on the component once rendered. setTimeout is necessary,
;; likely to allow the animation to finish.
on-show-advanced
(fn [] (js/setTimeout #(.scrollToEnd @list-ref {:animated false}) 300))
;; toolbar-contents (defn- flat-list-content [preferred-name registrar tribute-to-talk
header-in-toolbar (header-in-toolbar shown-multiaccount) active-contacts-count show-backup-seed?]
toolbar-action-items (toolbar-action-items public-key) [(cond-> {:title (or preferred-name :t/ens-usernames)
:subtitle (if (boolean registrar)
(if preferred-name
:t/ens-your-your-name
:t/ens-usernames-details)
:t/ens-network-restriction)
:subtitle-max-lines (if (boolean registrar)
(if preferred-name 1 2)
1)
:accessibility-label :ens-button
:container-margin-top 8
:disabled? (if (boolean registrar)
false
((complement boolean) preferred-name))
:accessories [:chevron]
:icon :main-icons/username}
(or (boolean registrar) preferred-name)
(assoc :on-press #(re-frame/dispatch [:navigate-to :ens-main registrar])))
;; TODO replace this with list-item config map
;; left it as it is because not sure how to enable it for testing
(when tribute-to-talk [tribute-to-talk-item tribute-to-talk])
{:title :t/contacts
:icon :main-icons/in-contacts
:accessibility-label :contacts-button
:accessories [(if (pos? active-contacts-count)
(str active-contacts-count)
:t/none)
:chevron]
:on-press #(re-frame/dispatch [:navigate-to :contacts-list])}
{:type :section-header
:accessibility-label :settings-section
:container-margin-top 16
:title :t/settings}
{:icon :main-icons/security
:title :t/privacy-and-security
:accessibility-label :privacy-and-security-settings-button
:accessories
[(when show-backup-seed?
[components.common/counter {:size 22} 1]) :chevron]
:on-press #(re-frame/dispatch [:navigate-to :privacy-and-security])}
{:icon :main-icons/notification
:title :t/notifications
:accessibility-label :notifications-button
;; TODO commented out for now, uncomment when notifications-settings view
;; is populated. Then remove :on-press below
;; :on-press #(re-frame/dispatch [:navigate-to :notifications-settings])
:on-press #(.openURL (react/linking) "app-settings://notification/status-im")
:accessories [:chevron]}
{:icon :main-icons/mobile
:title :t/sync-settings
:accessibility-label :sync-settings-button
:accessories [:chevron]
:on-press #(re-frame/dispatch [:navigate-to :sync-settings])}
{:icon :main-icons/settings-advanced
:title :t/advanced
:accessibility-label :advanced-button
:accessories [:chevron]
:on-press #(re-frame/dispatch [:navigate-to :advanced-settings])}
{:icon :main-icons/help
:title :t/need-help
:accessibility-label :help-button
:accessories [:chevron]
:on-press #(re-frame/dispatch [:navigate-to :help-center])}
{:icon :main-icons/info
:title :t/about-app
:accessibility-label :about-button
:accessories [:chevron]
:on-press #(re-frame/dispatch [:navigate-to :about-app])}
{:icon :main-icons/log_out
:title :t/sign-out
:accessibility-label :log-out-button
:container-margin-top 24
:container-margin-bottom 24
:theme :action-destructive
:on-press
#(re-frame/dispatch [:multiaccounts.logout.ui/logout-pressed])}])
;; flatlist contents (views/defview my-profile []
header (header shown-multiaccount) (views/letsubs [list-ref (reagent/atom nil)
content {:keys [public-key
[[ens-item preferred-name {:registrar stateofus-registrar}] preferred-name
[contacts-list-item active-contacts-count] seed-backed-up?
(when tribute-to-talk [tribute-to-talk-item tribute-to-talk]) mnemonic]
[my-profile-settings current-multiaccount shown-multiaccount :as multiaccount} [:multiaccount]
currency (nil? login-data)] active-contacts-count [:contacts/active-count]
(when (nil? login-data) [advanced shown-multiaccount network-name on-show-advanced])]] tribute-to-talk [:tribute-to-talk/profile]
[(react/safe-area-view) {:style {:flex 1}} registrar [:ens.stateofus/registrar]]
(let [show-backup-seed? (and (not seed-backed-up?)
(not (string/blank? mnemonic)))
content (flat-list-content
preferred-name registrar tribute-to-talk
active-contacts-count show-backup-seed?)]
[(react/safe-area-view) {:style {:flex 1
:margin-bottom tabs.styles/tabs-diff}}
[status-bar/status-bar {:type :main}] [status-bar/status-bar {:type :main}]
[large-toolbar/minimized-toolbar header-in-toolbar nil toolbar-action-items] [large-toolbar/minimized-toolbar
[large-toolbar/flat-list-with-large-header header content list-ref]]))) (header-in-toolbar multiaccount)
nil
(toolbar-action-items public-key)]
[large-toolbar/flat-list-with-large-header
(header multiaccount) content list-ref]])))

9
src/status_im/ui/screens/routing/profile_stack.cljs
View File

@ -11,14 +11,19 @@
:ens-name-details :ens-name-details
:blocked-users-list :blocked-users-list
:profile-photo-capture :profile-photo-capture
:about-app
:bootnodes-settings :bootnodes-settings
:installations :installations
:edit-bootnode :edit-bootnode
:offline-messaging-settings :offline-messaging-settings
:edit-mailserver :edit-mailserver
:help-center
:dapps-permissions :dapps-permissions
:privacy-and-security
:language-settings
:notifications-settings
:sync-settings
:advanced-settings
:help-center
:about-app
:manage-dapps-permissions :manage-dapps-permissions
:network-settings :network-settings
:network-details :network-details

14
src/status_im/ui/screens/routing/screens.cljs
View File

@ -17,6 +17,11 @@
[status-im.ui.screens.contacts-list.views :as contacts-list] [status-im.ui.screens.contacts-list.views :as contacts-list]
[status-im.ui.screens.currency-settings.views :as currency-settings] [status-im.ui.screens.currency-settings.views :as currency-settings]
[status-im.ui.screens.dapps-permissions.views :as dapps-permissions] [status-im.ui.screens.dapps-permissions.views :as dapps-permissions]
[status-im.ui.screens.privacy-and-security-settings.views :as privacy-and-security]
[status-im.ui.screens.language-settings.views :as language-settings]
[status-im.ui.screens.notifications-settings.views :as notifications-settings]
[status-im.ui.screens.sync-settings.views :as sync-settings]
[status-im.ui.screens.advanced-settings.views :as advanced-settings]
[status-im.ui.screens.fleet-settings.views :as fleet-settings] [status-im.ui.screens.fleet-settings.views :as fleet-settings]
[status-im.ui.screens.group.views :as group] [status-im.ui.screens.group.views :as group]
[status-im.ui.screens.hardwallet.authentication-method.views [status-im.ui.screens.hardwallet.authentication-method.views
@ -157,14 +162,19 @@
:ens-name-details ens/name-details :ens-name-details ens/name-details
:blocked-users-list contacts-list/blocked-users-list :blocked-users-list contacts-list/blocked-users-list
:profile-photo-capture photo-capture/profile-photo-capture :profile-photo-capture photo-capture/profile-photo-capture
:about-app about-app/about-app
:bootnodes-settings bootnodes-settings/bootnodes-settings :bootnodes-settings bootnodes-settings/bootnodes-settings
:installations pairing/installations :installations pairing/installations
:edit-bootnode edit-bootnode/edit-bootnode :edit-bootnode edit-bootnode/edit-bootnode
:offline-messaging-settings offline-messaging-settings/offline-messaging-settings :offline-messaging-settings offline-messaging-settings/offline-messaging-settings
:edit-mailserver edit-mailserver/edit-mailserver :edit-mailserver edit-mailserver/edit-mailserver
:help-center help-center/help-center
:dapps-permissions dapps-permissions/dapps-permissions :dapps-permissions dapps-permissions/dapps-permissions
:privacy-and-security privacy-and-security/privacy-and-security
:language-settings language-settings/language-settings
:notifications-settings notifications-settings/notifications-settings
:sync-settings sync-settings/sync-settings
:advanced-settings advanced-settings/advanced-settings
:help-center help-center/help-center
:about-app about-app/about-app
:manage-dapps-permissions dapps-permissions/manage :manage-dapps-permissions dapps-permissions/manage
:network-settings network/network-settings-view :network-settings network/network-settings-view
:network-details network/network-details-view :network-details network/network-details-view

3
src/status_im/ui/screens/signing/styles.cljs
View File

@ -21,9 +21,6 @@
(def message (def message
{:background-color :white {:background-color :white
:flex-grow 1
:flex-shrink 1
:flex-basis 600
:border-top-right-radius 16 :border-top-right-radius 16
:border-top-left-radius 16 :border-top-left-radius 16
:padding-bottom 40}) :padding-bottom 40})

72
src/status_im/ui/screens/signing/views.cljs
View File

@ -8,6 +8,7 @@
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.button.view :as button] [status-im.ui.components.button.view :as button]
[status-im.ui.components.copyable-text :as copyable-text]
[status-im.wallet.utils :as wallet.utils] [status-im.wallet.utils :as wallet.utils]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.chat-icon.screen :as chat-icon]
@ -56,23 +57,40 @@
(:address contact))) (:address contact)))
(defn contact-item [title contact] (defn contact-item [title contact]
[list-item/list-item {:type :small [list-item/list-item
:title title {:title-prefix title
:accessories [[react/text {:ellipsize-mode :middle :number-of-lines 1 :style {:flex-wrap :wrap}} :title-prefix-width 45
(displayed-name contact)]]}]) :type :small
:title
[copyable-text/copyable-text-view
{:copied-text (displayed-name contact)}
[react/text
{:ellipsize-mode :middle
:number-of-lines 1
:style {:color colors/gray
:font-family "monospace"
;; since this goes in list-item title
;; which has design constraints
;; specified in figma spec,
;; better to do this
:line-height 22}}
(displayed-name contact)]]}])
(defn token-item [{:keys [icon color] :as token} display-symbol] (defn token-item [{:keys [icon color] :as token} display-symbol]
(when token (when token
[react/view [react/view
[list-item/list-item [list-item/list-item
{:type :small :title (i18n/label :t/wallet-asset) {:type :small
:accessories [[acc-text (:name token) display-symbol] :title :t/wallet-asset
(if icon :accessories
[list/item-image (assoc icon [display-symbol
:style {:background-color colors/gray-lighter (if icon
:border-radius 16} [list/item-image
:image-style {:width 32 :height 32})] (assoc icon
[chat-icon/custom-icon-view-list (:name token) color 32])]}] :style {:background-color colors/gray-lighter
:border-radius 16}
:image-style {:width 24 :height 24})]
[chat-icon/custom-icon-view-list (:name token) color 32])]}]
[separator]])) [separator]]))
(defn header [{:keys [in-progress?] :as sign} {:keys [contact amount token approve?] :as tx} display-symbol fee fee-display-symbol] (defn header [{:keys [in-progress?] :as sign} {:keys [contact amount token approve?] :as tx} display-symbol fee fee-display-symbol]
@ -227,17 +245,25 @@
[token-item token display-symbol] [token-item token display-symbol]
(when-not approve? (when-not approve?
[react/view [react/view
[list-item/list-item {:type :small :title (i18n/label :t/send-request-amount) [list-item/list-item
:error amount-error {:type :small
:accessories [[acc-text (if amount (str amount) "0") :title :t/send-request-amount
(or display-symbol fee-display-symbol)]]}] :error amount-error
:accessories
[[acc-text (if amount (str amount) "0")
(or display-symbol fee-display-symbol)]]}]
[separator]]) [separator]])
[list-item/list-item [list-item/list-item
{:type :small :title (i18n/label :t/network-fee) :error gas-error {:type :small
:title :t/network-fee
:error gas-error
:accessories [[acc-text fee fee-display-symbol] :chevron] :accessories [[acc-text fee fee-display-symbol] :chevron]
:on-press #(re-frame/dispatch [:signing.ui/open-fee-sheet :on-press
{:content (fn [] [sheets/fee-bottom-sheet fee-display-symbol]) #(re-frame/dispatch
:content-height 270}])}] [:signing.ui/open-fee-sheet
{:content
(fn [] [sheets/fee-bottom-sheet fee-display-symbol])
:content-height 270}])}]
[react/view {:align-items :center :margin-top 16 :margin-bottom 40} [react/view {:align-items :center :margin-top 16 :margin-bottom 40}
(if keycard-multiaccount? (if keycard-multiaccount?
[sign-with-keycard-button amount-error gas-error] [sign-with-keycard-button amount-error gas-error]
@ -276,10 +302,10 @@
[react/keyboard-avoiding-view {:style {:position :absolute :top 0 :bottom 0 :left 0 :right 0}} [react/keyboard-avoiding-view {:style {:position :absolute :top 0 :bottom 0 :left 0 :right 0}}
[react/view {:flex 1} [react/view {:flex 1}
[react/animated-view {:flex 1 :background-color :black :opacity alpha-value}] [react/animated-view {:flex 1 :background-color :black :opacity alpha-value}]
[react/animated-view {:style {:position :absolute :bottom 0 :top -40 :left 0 :right 0 [react/animated-view {:style {:position :absolute
:transform [{:translateY bottom-anim-value}]}} :transform [{:translateY bottom-anim-value}]
:bottom 0 :left 0 :right 0}}
[react/view {:flex 1} [react/view {:flex 1}
[react/view {:flex-shrink 2.5 :flex-grow 2.5 :flex-basis 600}]
(if (:message @current-tx) (if (:message @current-tx)
[message-sheet] [message-sheet]
[sheet @current-tx])]]]]))}))) [sheet @current-tx])]]]]))})))

52
src/status_im/ui/screens/sync_settings/views.cljs Normal file
View File

@ -0,0 +1,52 @@
(ns status-im.ui.screens.sync-settings.views
(:require-macros [status-im.utils.views :as views])
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.list-item.views :as list-item]
[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]))
(defn- list-data [mailserver-id use-mobile-data?]
(let [mobile-data-usage-state (if use-mobile-data?
:t/mobile-network-use-mobile
:t/mobile-network-use-wifi)]
[{:container-margin-top 8
:type :section-header
:title :t/message-syncing}
{:type :small
:title :t/mobile-network-settings
:accessibility-label :notifications-button
:on-press
#(re-frame/dispatch [:navigate-to :mobile-network-settings])
:accessories [mobile-data-usage-state :chevron]}
{:type :small
:title :t/offline-messaging
:accessibility-label :offline-messages-settings-button
:on-press
#(re-frame/dispatch [:navigate-to :offline-messaging-settings])
:accessories [mailserver-id :chevron]
:container-margin-bottom 8}
list-item/divider
{:container-margin-top 8
:type :section-header
:title :t/device-syncing}
{:type :small
:title :t/devices
:accessibility-label :pairing-settings-button
:on-press #(re-frame/dispatch [:navigate-to :installations])
:accessories [:chevron]}]))
(views/defview sync-settings []
(views/letsubs [{:keys [syncing-on-mobile-network?]} [:multiaccount]
mailserver-id [:mailserver/current-id]]
[react/view {:flex 1 :background-color colors/white}
[status-bar/status-bar]
[toolbar/simple-toolbar
(i18n/label :t/sync-settings)]
[list/flat-list
{:data (list-data mailserver-id syncing-on-mobile-network?)
:key-fn (fn [_ i] (str i))
:render-fn list/flat-list-generic-render-fn}]]))

3
src/status_im/ui/screens/views.cljs
View File

@ -50,9 +50,6 @@
(= view :public-chat-actions) (= view :public-chat-actions)
(merge home.sheet/public-chat-actions) (merge home.sheet/public-chat-actions)
(= view :learn-more)
(merge about-app/learn-more)
(= view :keycard.login/more) (= view :keycard.login/more)
(merge keycard/more-sheet) (merge keycard/more-sheet)

35
src/status_im/ui/screens/wallet/accounts/views.cljs
View File

@ -71,30 +71,25 @@
(defn render-asset [currency] (defn render-asset [currency]
(fn [{:keys [icon decimals amount color value] :as token}] (fn [{:keys [icon decimals amount color value] :as token}]
[list-item/list-item [list-item/list-item
{:content [react/view {:style {:margin-horizontal 16 :justify-content :center :flex-shrink 1}} {:title-prefix (wallet.utils/format-amount amount decimals)
[react/view {:flex-direction :row} :title (wallet.utils/display-symbol token)
[react/text {:style {:font-weight "500" :flex-shrink 0.5} :number-of-lines 1 :ellipsize-mode :tail} :title-color-override colors/gray
(wallet.utils/format-amount amount decimals)] :subtitle (str (if value value 0) " " currency)
[react/text {:style {:font-weight "500" :color colors/gray :margin-left 6} :icon (if icon
:number-of-lines 1} [list/item-image icon]
(wallet.utils/display-symbol token)]] [chat-icon/custom-icon-view-list (:name token) color])}]))
(when value
[react/text {:style {:color colors/gray}} (str value " " currency)])]
:image (if icon
[list/item-image icon]
[chat-icon/custom-icon-view-list (:name token) color])}]))
(defn render-collectible [{:keys [name icon amount] :as collectible}] (defn render-collectible [{:keys [name icon amount] :as collectible}]
(let [items-number (money/to-fixed amount) (let [items-number (money/to-fixed amount)
details? (pos? items-number)] details? (pos? items-number)]
[react/touchable-highlight [list-item/list-item
(when details? {:title (wallet.utils/display-symbol collectible)
{:on-press #(re-frame/dispatch [:show-collectibles-list collectible])}) :subtitle name
[list-item/list-item :icon [list/item-image icon]
{:title (wallet.utils/display-symbol collectible) :on-press (when details?
:subtitle name #(re-frame/dispatch
:image [list/item-image icon] [:show-collectibles-list collectible]))
:accessories [items-number :chevron]}]])) :accessories [items-number :chevron]}]))
(views/defview assets-and-collections [] (views/defview assets-and-collections []
(views/letsubs [{:keys [tokens nfts]} [:wallet/all-visible-assets-with-values] (views/letsubs [{:keys [tokens nfts]} [:wallet/all-visible-assets-with-values]

16
src/status_im/ui/screens/wallet/add_new/views.cljs
View File

@ -6,7 +6,6 @@
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.list-header.views :as list-header]
[status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.common.common :as components.common] [status-im.ui.components.common.common :as components.common]
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
@ -27,10 +26,17 @@
[react/text {:style {:color colors/gray :text-align :center :margin-top 16 :line-height 22}} [react/text {:style {:color colors/gray :text-align :center :margin-top 16 :line-height 22}}
(i18n/label :t/add-account-description)]] (i18n/label :t/add-account-description)]]
[react/view {:height 52}] [react/view {:height 52}]
[list-header/list-header (i18n/label :t/default)] [list-item/list-item
[list-item/list-item {:title (i18n/label :t/generate-a-new-account) :theme :action {:type :section-header
:icon :main-icons/add :accessories [:chevron] :title :t/default}]
:on-press #(re-frame/dispatch [:navigate-to :add-new-account-password])}]]]) [list-item/list-item
{:title :t/generate-a-new-account
:theme :action
:icon :main-icons/add
:accessories [:chevron]
:on-press
#(re-frame/dispatch
[:navigate-to :add-new-account-password])}]]])
(defview colors-popover [selected-color] (defview colors-popover [selected-color]
(letsubs [width [:dimensions/window-width]] (letsubs [width [:dimensions/window-width]]

20
translations/en.json
View File

@ -215,6 +215,7 @@
"removed": "removed", "removed": "removed",
"empty-topic": "Empty topic", "empty-topic": "Empty topic",
"message": "Message", "message": "Message",
"message-syncing": "Message syncing",
"image-source-title": "Edit picture", "image-source-title": "Edit picture",
"left": "left", "left": "left",
"to": "To", "to": "To",
@ -467,6 +468,8 @@
"start-chat": "Start chat", "start-chat": "Start chat",
"wallet-onboarding-title": "Simple and secure cryptocurrency wallet", "wallet-onboarding-title": "Simple and secure cryptocurrency wallet",
"logout": "Log out", "logout": "Log out",
"sign-out": "Sign out",
"delete-my-account": "Delete my account",
"status-not-sent-tap": "Not confirmed. Tap for options", "status-not-sent-tap": "Not confirmed. Tap for options",
"status-not-sent-click": "Not confirmed. Click for options", "status-not-sent-click": "Not confirmed. Click for options",
"send-logs": "Report a bug", "send-logs": "Report a bug",
@ -597,6 +600,11 @@
"currency-display-name-czk": "Czech Koruna", "currency-display-name-czk": "Czech Koruna",
"currency-display-name-bob": "Bolivia Bolíviano", "currency-display-name-bob": "Bolivia Bolíviano",
"privacy-policy": "Privacy Policy", "privacy-policy": "Privacy Policy",
"privacy-and-security": "Privacy and security",
"language": "Language",
"sync-settings": "Sync settings",
"security": "Security",
"privacy": "Privacy",
"currency-display-name-lak": "Laos Kip", "currency-display-name-lak": "Laos Kip",
"recipient-code": "Enter recipient address", "recipient-code": "Enter recipient address",
"fleet": "Fleet", "fleet": "Fleet",
@ -645,6 +653,7 @@
"at": "at", "at": "at",
"off": "Off", "off": "Off",
"dev-mode": "Development mode", "dev-mode": "Development mode",
"dev-mode-settings": "Development mode settings",
"chaos-mode": "Chaos mode", "chaos-mode": "Chaos mode",
"intro-text-description": "A community-powered platform to securely chat and transact on the Ethereum blockchain", "intro-text-description": "A community-powered platform to securely chat and transact on the Ethereum blockchain",
"currency-display-name-kwd": "Kuwaiti Dinar", "currency-display-name-kwd": "Kuwaiti Dinar",
@ -752,7 +761,7 @@
"your-contact-code": "Granting access authorizes this DApp to retrieve your contact code", "your-contact-code": "Granting access authorizes this DApp to retrieve your contact code",
"password-placeholder": "At least 6 characters", "password-placeholder": "At least 6 characters",
"clear-history-action": "Clear", "clear-history-action": "Clear",
"version": "Version {{version}}", "version": "Version",
"specify-mailserver-address": "Specify a mailserver address", "specify-mailserver-address": "Specify a mailserver address",
"scan-qr-code": "Scan a QR code with a wallet address", "scan-qr-code": "Scan a QR code with a wallet address",
"wallet-total-value": "Total value", "wallet-total-value": "Total value",
@ -760,6 +769,8 @@
"mailserver-address": "Mailserver address", "mailserver-address": "Mailserver address",
"add": "Add", "add": "Add",
"bootnodes-settings": "Bootnodes settings", "bootnodes-settings": "Bootnodes settings",
"les-ulc": "LES/ULC",
"ulc-enabled": "ULC enabled",
"allowing-authorizes-this-dapp": "Allowing authorizes this DApp to retrieve your wallet address and enable Web3", "allowing-authorizes-this-dapp": "Allowing authorizes this DApp to retrieve your wallet address and enable Web3",
"currency-display-name-srd": "Suriname Dollar", "currency-display-name-srd": "Suriname Dollar",
"transaction-request": "Transaction Request", "transaction-request": "Transaction Request",
@ -832,6 +843,7 @@
"currency-display-name-uah": "Ukraine Hryvnia", "currency-display-name-uah": "Ukraine Hryvnia",
"web3-opt-in": "Browser privacy mode", "web3-opt-in": "Browser privacy mode",
"preview-privacy": "Preview privacy mode", "preview-privacy": "Preview privacy mode",
"hide-content-when-switching-apps": "Hide content when switching apps",
"recover-password-invalid": "This multiaccount already exists but passwords do not match", "recover-password-invalid": "This multiaccount already exists but passwords do not match",
"recover-keycard-multiaccount-not-supported": "Recovering keycard multiaccount with password is not supported", "recover-keycard-multiaccount-not-supported": "Recovering keycard multiaccount with password is not supported",
"members-active-none": "no members", "members-active-none": "no members",
@ -901,6 +913,7 @@
"puk-and-pairing-codes-displayed": "PUK and pairing codes displayed", "puk-and-pairing-codes-displayed": "PUK and pairing codes displayed",
"begin-keycard-setup-confirmation-text": "Setup will erase your card including the keys already stored on your card. Would you like to continue?", "begin-keycard-setup-confirmation-text": "Setup will erase your card including the keys already stored on your card. Would you like to continue?",
"device-pairing": "Device pairing", "device-pairing": "Device pairing",
"device-syncing": "Device syncing",
"something-went-wrong": "Something went wrong", "something-went-wrong": "Something went wrong",
"try-again": "Try again", "try-again": "Try again",
"taking-long-hold-phone-connected": "This will take a few seconds.\n Hold card connected to the phone.", "taking-long-hold-phone-connected": "This will take a few seconds.\n Hold card connected to the phone.",
@ -915,6 +928,8 @@
"login-pin-description": "Enter your PIN code to login\nto your multiaccount", "login-pin-description": "Enter your PIN code to login\nto your multiaccount",
"new-pin-description": "Enter new PIN code", "new-pin-description": "Enter new PIN code",
"change-pin": "Change PIN", "change-pin": "Change PIN",
"change-password": "Change Password",
"change-passcode": "Change Passcode",
"enter-pin": "Enter PIN", "enter-pin": "Enter PIN",
"enter-pin-description": "Enter your PIN code to login\n to your multiaccount", "enter-pin-description": "Enter your PIN code to login\n to your multiaccount",
"create-pin": "Create PIN", "create-pin": "Create PIN",
@ -1041,6 +1056,7 @@
"mailserver-error-title": "Error connecting to mailserver", "mailserver-error-title": "Error connecting to mailserver",
"mailserver-error-content": "The mailserver you selected couldn't be reached.", "mailserver-error-content": "The mailserver you selected couldn't be reached.",
"dapps-permissions": "DApp permissions", "dapps-permissions": "DApp permissions",
"set-dapp-access-permissions": "Set DApp access permissions",
"revoke-access": "Revoke access", "revoke-access": "Revoke access",
"extensions-camera-send-picture": "Send picture", "extensions-camera-send-picture": "Send picture",
"extensions-network-not-found": "network not found for the given chain-id", "extensions-network-not-found": "network not found for the given chain-id",
@ -1061,6 +1077,7 @@
"waiting-for-wifi-change": "Change", "waiting-for-wifi-change": "Change",
"mobile-network-settings": "Mobile data", "mobile-network-settings": "Mobile data",
"mobile-network-use-mobile": "Use mobile data", "mobile-network-use-mobile": "Use mobile data",
"mobile-network-use-wifi": "Wi-Fi only",
"mobile-network-use-mobile-details": "Status tends to use a lot of data when syncing chats. You can choose not to sync when on mobile network", "mobile-network-use-mobile-details": "Status tends to use a lot of data when syncing chats. You can choose not to sync when on mobile network",
"mobile-network-ask-me": "Ask me when on mobile network", "mobile-network-ask-me": "Ask me when on mobile network",
"mobile-network-go-to-settings": "Go to settings", "mobile-network-go-to-settings": "Go to settings",
@ -1198,6 +1215,7 @@
"add-account" : "Add account", "add-account" : "Add account",
"add-an-account" : "Add an account", "add-an-account" : "Add an account",
"back-up-your-seed-phrase" : "Back up your recovery phrase", "back-up-your-seed-phrase" : "Back up your recovery phrase",
"back-up-seed-phrase" : "Back up Seed phrase",
"add-a-watch-account" : "Add a watch-only account", "add-a-watch-account" : "Add a watch-only account",
"account-settings" : "Account settings", "account-settings" : "Account settings",
"export-account" : "Export account", "export-account" : "Export account",

4
translations/es_419.json
View File

@ -35,6 +35,8 @@
"bootnode-address": "Dirección de bootnode", "bootnode-address": "Dirección de bootnode",
"bootnode-details": "Detalles de Bootnode", "bootnode-details": "Detalles de Bootnode",
"bootnodes": "Bootnodes", "bootnodes": "Bootnodes",
"les-ulc": "LES/ULC",
"ulc-enabled": "ULC enabled",
"bootnodes-enabled": "Bootnodes activados", "bootnodes-enabled": "Bootnodes activados",
"bootnodes-settings": "Ajustes de bootnode", "bootnodes-settings": "Ajustes de bootnode",
"browser": "Navegador", "browser": "Navegador",
@ -630,7 +632,7 @@
"use-valid-qr-code": "Este código QR no contiene un enlace universal, código de contacto o nombre de usuario válido: {{data}}", "use-valid-qr-code": "Este código QR no contiene un enlace universal, código de contacto o nombre de usuario válido: {{data}}",
"validation-amount-invalid-number": "El importe no es un número válido", "validation-amount-invalid-number": "El importe no es un número válido",
"validation-amount-is-too-precise": "La cantidad es muy precisa. La cantidad máxima de decimales es {{decimals}} .", "validation-amount-is-too-precise": "La cantidad es muy precisa. La cantidad máxima de decimales es {{decimals}} .",
"version": "Versión {{version}}", "version": "Versión",
"view-cryptokitties": "Ver en CryptoKitties", "view-cryptokitties": "Ver en CryptoKitties",
"view-cryptostrikers": "Ver en CryptoStrikers", "view-cryptostrikers": "Ver en CryptoStrikers",
"view-etheremon": "Ver en Etheremon", "view-etheremon": "Ver en Etheremon",

2
translations/fa.json
View File

@ -635,7 +635,7 @@
"use-valid-qr-code": "این کد QR حاوی لینک جهانی، کد تماس یا نام کاربری معتبری نیست: {{data}}", "use-valid-qr-code": "این کد QR حاوی لینک جهانی، کد تماس یا نام کاربری معتبری نیست: {{data}}",
"validation-amount-invalid-number": "مقدار وارد شده صحیح نیست", "validation-amount-invalid-number": "مقدار وارد شده صحیح نیست",
"validation-amount-is-too-precise": "مقدار را بیش از حد دقیق وارد کرده اید. حداکثر تعداد اعشار {{decimals}} است.", "validation-amount-is-too-precise": "مقدار را بیش از حد دقیق وارد کرده اید. حداکثر تعداد اعشار {{decimals}} است.",
"version": "نسخه {{version}}", "version": "نسخه",
"view-cryptokitties": "مشاهده در CryptoKitties", "view-cryptokitties": "مشاهده در CryptoKitties",
"view-cryptostrikers": "مشاهده در CryptoStrikers", "view-cryptostrikers": "مشاهده در CryptoStrikers",
"view-etheremon": "مشاهده در Etheremon", "view-etheremon": "مشاهده در Etheremon",

2
translations/fr.json
View File

@ -1180,7 +1180,7 @@
"v1-messages-warning-title": "Attention, fonctionnalité expérimentale", "v1-messages-warning-title": "Attention, fonctionnalité expérimentale",
"validation-amount-invalid-number": "Le montant n'est pas un nombre valide", "validation-amount-invalid-number": "Le montant n'est pas un nombre valide",
"validation-amount-is-too-precise": "Le montant est trop précis. Le nombre maximum de décimales est {{decimals}} .", "validation-amount-is-too-precise": "Le montant est trop précis. Le nombre maximum de décimales est {{decimals}} .",
"version": "Version {{version}}", "version": "Version",
"view-cryptokitties": "Voir dans CryptoKitties", "view-cryptokitties": "Voir dans CryptoKitties",
"view-cryptostrikers": "Afficher dans CryptoStrikers", "view-cryptostrikers": "Afficher dans CryptoStrikers",
"view-etheremon": "Voir dans Etheremon", "view-etheremon": "Voir dans Etheremon",

2
translations/ja.json
View File

@ -1183,7 +1183,7 @@
"v1-messages-warning-title": "警告、これは実験的な機能です", "v1-messages-warning-title": "警告、これは実験的な機能です",
"validation-amount-invalid-number": "金額が正しくありません", "validation-amount-invalid-number": "金額が正しくありません",
"validation-amount-is-too-precise": "金額が細かすぎます。小数点以下を{{decimals}}桁以下にしてください。", "validation-amount-is-too-precise": "金額が細かすぎます。小数点以下を{{decimals}}桁以下にしてください。",
"version": "バージョン{{version}}", "version": "バージョン",
"view-cryptokitties": "CryptoKittiesで表示", "view-cryptokitties": "CryptoKittiesで表示",
"view-cryptostrikers": "CryptoStrikersで表示", "view-cryptostrikers": "CryptoStrikersで表示",
"view-etheremon": "Etheremonで表示", "view-etheremon": "Etheremonで表示",

2
translations/ko.json
View File

@ -1179,7 +1179,7 @@
"v1-messages-warning-title": "경고, 테스트 중인 기능임", "v1-messages-warning-title": "경고, 테스트 중인 기능임",
"validation-amount-invalid-number": "잘못된 수량입니다", "validation-amount-invalid-number": "잘못된 수량입니다",
"validation-amount-is-too-precise": "액수가 너무 정확합니다. 최대 소수점 자리수는 {{decimals}}입니다.", "validation-amount-is-too-precise": "액수가 너무 정확합니다. 최대 소수점 자리수는 {{decimals}}입니다.",
"version": "버전 {{version}}", "version": "버전",
"view-cryptokitties": "CryptoKitties에서 보기", "view-cryptokitties": "CryptoKitties에서 보기",
"view-cryptostrikers": "CryptoStrikers에서보기", "view-cryptostrikers": "CryptoStrikers에서보기",
"view-etheremon": "Etheremon에서보기", "view-etheremon": "Etheremon에서보기",

2
translations/ms.json
View File

@ -683,7 +683,7 @@
"use-valid-qr-code": "Kod QR ini tidak mengandungi pautan sejagat, kod pengenalan atau nama pengguna yang sah: {{data}}", "use-valid-qr-code": "Kod QR ini tidak mengandungi pautan sejagat, kod pengenalan atau nama pengguna yang sah: {{data}}",
"validation-amount-invalid-number": "Jumlah bukan nombor yang sah", "validation-amount-invalid-number": "Jumlah bukan nombor yang sah",
"validation-amount-is-too-precise": "Jumlah terlalu banyak. Jumlah maksimum perpuluhan adalah {{decimals}} .", "validation-amount-is-too-precise": "Jumlah terlalu banyak. Jumlah maksimum perpuluhan adalah {{decimals}} .",
"version": "Versi {{version}}", "version": "Versi",
"view-cryptokitties": "Lihat di CryptoKitties", "view-cryptokitties": "Lihat di CryptoKitties",
"view-cryptostrikers": "Lihat di CryptoStrikers", "view-cryptostrikers": "Lihat di CryptoStrikers",
"view-etheremon": "Lihat di Etheremon", "view-etheremon": "Lihat di Etheremon",

2
translations/ne.json
View File

@ -659,7 +659,7 @@
"use-valid-qr-code": "Kod QR ini tidak mengandungi pautan sejagat, kod pengenalan atau nama pengguna yang sah: {{data}}", "use-valid-qr-code": "Kod QR ini tidak mengandungi pautan sejagat, kod pengenalan atau nama pengguna yang sah: {{data}}",
"validation-amount-invalid-number": "राशि वैध संख्या होइन", "validation-amount-invalid-number": "राशि वैध संख्या होइन",
"validation-amount-is-too-precise": "Jumlah terlalu banyak. Jumlah maksimum perpuluhan adalah {{decimals}} .", "validation-amount-is-too-precise": "Jumlah terlalu banyak. Jumlah maksimum perpuluhan adalah {{decimals}} .",
"version": "Versi {{version}}", "version": "Version",
"view-cryptokitties": "CryptoKitties मा हेर्नुहोस्", "view-cryptokitties": "CryptoKitties मा हेर्नुहोस्",
"view-cryptostrikers": "Lihat di CryptoStrikers", "view-cryptostrikers": "Lihat di CryptoStrikers",
"view-etheremon": "Etheremon मा हेर्नुहोस्", "view-etheremon": "Etheremon मा हेर्नुहोस्",

2
translations/pl.json
View File

@ -615,7 +615,7 @@
"use-valid-qr-code": "Ten kod QR nie zawiera prawidłowego linku, kodu kontaktowego lub nazwy użytkownika: {{data}}", "use-valid-qr-code": "Ten kod QR nie zawiera prawidłowego linku, kodu kontaktowego lub nazwy użytkownika: {{data}}",
"validation-amount-invalid-number": "Kwota nie jest prawidłową liczbą", "validation-amount-invalid-number": "Kwota nie jest prawidłową liczbą",
"validation-amount-is-too-precise": "Kwota jest zbyt dokładna. Maksymalna liczba miejsc po przecinku wynosi {{decimals}}.", "validation-amount-is-too-precise": "Kwota jest zbyt dokładna. Maksymalna liczba miejsc po przecinku wynosi {{decimals}}.",
"version": "Wersja {{version}}", "version": "Wersja",
"view-cryptokitties": "Zobacz w CryptoKitties", "view-cryptokitties": "Zobacz w CryptoKitties",
"view-cryptostrikers": "Zobacz w CryptoStrikers", "view-cryptostrikers": "Zobacz w CryptoStrikers",
"view-etheremon": "Zobacz w Etheremon", "view-etheremon": "Zobacz w Etheremon",

2
translations/ru.json
View File

@ -1211,7 +1211,7 @@
"v1-messages-warning-title": "Предупреждение, экспериментальная функция", "v1-messages-warning-title": "Предупреждение, экспериментальная функция",
"validation-amount-invalid-number": "Сумма недействительна", "validation-amount-invalid-number": "Сумма недействительна",
"validation-amount-is-too-precise": "Слишком много чисел после запятой. {{decimals}} - это максимальное допустимое количество знаков после запятой.", "validation-amount-is-too-precise": "Слишком много чисел после запятой. {{decimals}} - это максимальное допустимое количество знаков после запятой.",
"version": "Версия {{version}}", "version": "Версия",
"view-cryptokitties": "Посмотреть в CryptoKitties", "view-cryptokitties": "Посмотреть в CryptoKitties",
"view-cryptostrikers": "Посмотреть в CryptoStrikers", "view-cryptostrikers": "Посмотреть в CryptoStrikers",
"view-etheremon": "Посмотреть в Etheremon", "view-etheremon": "Посмотреть в Etheremon",

2
translations/zh_Hans_CN.json
View File

@ -1187,7 +1187,7 @@
"v1-messages-warning-title": "警告，实验性功能", "v1-messages-warning-title": "警告，实验性功能",
"validation-amount-invalid-number": "金额不是一个有效的数字", "validation-amount-invalid-number": "金额不是一个有效的数字",
"validation-amount-is-too-precise": "金额过于精确，所能发送的最小单位是1 Wei (1x10^-18 ETH)", "validation-amount-is-too-precise": "金额过于精确，所能发送的最小单位是1 Wei (1x10^-18 ETH)",
"version": "{{version}} 版本", "version": "版本",
"view-cryptokitties": "在CryptoKitties中查看", "view-cryptokitties": "在CryptoKitties中查看",
"view-cryptostrikers": "在 CryptoStrikers 中查看", "view-cryptostrikers": "在 CryptoStrikers 中查看",
"view-etheremon": "在Etheremon中查看", "view-etheremon": "在Etheremon中查看",

2
translations/zh_hans.json
View File

@ -1131,7 +1131,7 @@
"use-valid-qr-code": "此二维码未包含有效的通用链接，联系人代码或用户名： {{data}}", "use-valid-qr-code": "此二维码未包含有效的通用链接，联系人代码或用户名： {{data}}",
"validation-amount-invalid-number": "金额不是一个有效的数字", "validation-amount-invalid-number": "金额不是一个有效的数字",
"validation-amount-is-too-precise": "金额过于精确，所能发送的最小单位是1 Wei (1x10^-18 ETH)", "validation-amount-is-too-precise": "金额过于精确，所能发送的最小单位是1 Wei (1x10^-18 ETH)",
"version": "{{version}} 版本", "version": "版本",
"view-cryptokitties": "在CryptoKitties中查看", "view-cryptokitties": "在CryptoKitties中查看",
"view-cryptostrikers": "在 CryptoStrikers 中查看", "view-cryptostrikers": "在 CryptoStrikers 中查看",
"view-etheremon": "在Etheremon中查看", "view-etheremon": "在Etheremon中查看",