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

Replace all text-inputs with quo component 

Replace all text-inputs with label

Fix tooltip

Replace search input

Replace white bg text inputs with Quo

Add placeholders

Clear quo text inputs on blur

 Change seed phrase word count style

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
This commit is contained in:
Gheorghe Pinzaru 2020-06-08 14:57:45 +03:00
parent c40529faee
commit 379384211f
No known key found for this signature in database
GPG Key ID: C9A094959935A952
43 changed files with 579 additions and 832 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/mocks/js_dependencies.cljs
View File

@ -153,8 +153,8 @@
:Text #js {} :Text #js {}
:Extrapolate #js {:CLAMP nil} :Extrapolate #js {:CLAMP nil}
:Code #js {}} :Code #js {}}
:Easing #js {:bezier nil :Easing #js {:bezier identity
:linear nil} :linear identity}
:clockRunning nil}) :clockRunning nil})
(def react-native-gesture-handler #js {:default #js {} (def react-native-gesture-handler #js {:default #js {}
:State #js {:BEGAN nil :State #js {:BEGAN nil
@ -203,6 +203,5 @@
"react-native-mail" react-native-mail "react-native-mail" react-native-mail
"react-native-image-resizer" image-resizer "react-native-image-resizer" image-resizer
"react-native-haptic-feedback" react-native-haptic-feedback "react-native-haptic-feedback" react-native-haptic-feedback
"reanimated-bottom-sheet" reanimated-bottom-sheet
"./fleets.js" default-fleets "./fleets.js" default-fleets
nil)) nil))

19
src/quo/components/text.cljs
View File

@ -5,15 +5,18 @@
[quo.react-native :as rn] [quo.react-native :as rn]
[reagent.core :as reagent])) [reagent.core :as reagent]))
(defn text-style [{:keys [size align weight color style]}] (defn text-style [{:keys [size align weight monospace color style]}]
;; NOTE(Ferossgo): or in destructoring will keep nil as a value ;; NOTE(Ferossgo): or in destructoring will keep nil as a value
(merge (case (or weight :regular) (merge (if monospace
:regular typography/font-regular ;; TODO(Ferossgp): Add all weights for monospace
:medium typography/font-medium typography/monospace
:semi-bold typography/font-semi-bold (case (or weight :regular)
:bold typography/font-bold :regular typography/font-regular
:monospace typography/monospace :medium typography/font-medium
:inherit nil) :semi-bold typography/font-semi-bold
:bold typography/font-bold
:monospace typography/monospace ; DEPRECATED
:inherit nil))
(case (or color :main) (case (or color :main)
:main {:color (:text-01 @colors/theme)} :main {:color (:text-01 @colors/theme)}
:secondary {:color (:text-02 @colors/theme)} :secondary {:color (:text-02 @colors/theme)}

129
src/quo/components/text_input.cljs
View File

@ -5,30 +5,36 @@
[quo.react-native :as rn] [quo.react-native :as rn]
;; TODO(Ferossgp): Move icon component to lib ;; TODO(Ferossgp): Move icon component to lib
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
;; TODO(Ferossgp): Move tooltip into lib
[quo.components.tooltip :as tooltip] [quo.components.tooltip :as tooltip]
[quo.react :as react]
[quo.platform :as platform] [quo.platform :as platform]
[quo.design-system.typography :as typography] [quo.design-system.typography :as typography]
[quo.design-system.spacing :as spacing] [quo.design-system.spacing :as spacing]
[quo.design-system.colors :as colors] [quo.design-system.colors :as colors]
[quo.components.text :as text])) [quo.components.text :as text]))
;; NOTE(Ferossgp): Refactor with hooks when available
;; We track all currently mounted text input refs
;; in a ref-to-defaultValue map
;; so that we can clear them (restore their default values)
;; when global react-navigation's onWillBlur event is invoked
(defonce text-input-refs (atom {}))
(s/def ::multiline boolean?) (s/def ::multiline boolean?)
(s/def ::secure-text-entry boolean?) (s/def ::secure-text-entry boolean?)
(s/def ::show-cancel boolean?) (s/def ::show-cancel boolean?)
(s/def ::label (s/nilable string?)) (s/def ::label (s/nilable (s/or :string string? :component vector?)))
(s/def ::cancel-label (s/nilable string?)) (s/def ::cancel-label (s/nilable string?))
(s/def ::default-value (s/nilable string?)) (s/def ::default-value (s/nilable string?))
(s/def ::placeholder (s/nilable string?)) (s/def ::placeholder (s/nilable string?))
(s/def ::keyboard-type #{}) (s/def ::keyboard-type (s/nilable (s/or :string string? :keyword keyword?))) ; TODO: make set
(s/def ::accessibility-label (s/nilable (s/or :string string? :keyword keyword?))) (s/def ::accessibility-label (s/nilable (s/or :string string? :keyword keyword?)))
(s/def ::on-focus fn?) (s/def ::on-focus fn?)
(s/def ::on-blur fn?) (s/def ::on-blur fn?)
(s/def ::on-press fn?) (s/def ::on-press fn?)
(s/def ::accessory (s/keys :req-un [::icon] (s/def ::accessory (s/keys :opt-un [::on-press
:opt-un [::on-press])) ::icon
::component]))
(s/def ::after (s/nilable ::accessory)) (s/def ::after (s/nilable ::accessory))
(s/def ::before (s/nilable ::accessory)) (s/def ::before (s/nilable ::accessory))
@ -60,15 +66,13 @@
false))) false)))
;; TODO(Ferossgp): Check performance for android layout animations ;; TODO(Ferossgp): Check performance for android layout animations
(when (and platform/android? ;; (when (and platform/android?
(aget rn/ui-manager "setLayoutAnimationEnabledExperimental")) ;; (aget rn/ui-manager "setLayoutAnimationEnabledExperimental"))
(ocall rn/ui-manager "setLayoutAnimationEnabledExperimental" true)) ;; (ocall rn/ui-manager "setLayoutAnimationEnabledExperimental" true))
(def height 44) ; 22 line-height + 11*2 vertical padding (def height 44) ; 22 line-height + 11*2 vertical padding
(def multiline-height 88) ; 3 * 22 three line-height + 11* vertical padding (def multiline-height 88) ; 3 * 22 three line-height + 11* vertical padding
(defn container-style [])
(defn label-style [] (defn label-style []
{:margin-bottom (:tiny spacing/spacing)}) {:margin-bottom (:tiny spacing/spacing)})
@ -84,8 +88,10 @@
:background-color (:ui-01 @colors/theme)} :background-color (:ui-01 @colors/theme)}
style)) style))
(defn text-input-style [multiline input-style before after] (defn text-input-style [multiline input-style monospace before after]
(merge typography/font-regular (merge (if monospace
typography/monospace
typography/font-regular)
{:padding-top 11 {:padding-top 11
:padding-bottom 11 :padding-bottom 11
:font-size 15 :font-size 15
@ -115,7 +121,7 @@
{:flex 1 {:flex 1
:justify-content :center})) :justify-content :center}))
(defn accessory-element [{:keys [icon icon-opts style accessibility-label on-press]}] (defn accessory-element [{:keys [icon component icon-opts style accessibility-label on-press]}]
(let [el (if on-press (let [el (if on-press
rn/touchable-opacity rn/touchable-opacity
rn/view)] rn/view)]
@ -126,21 +132,29 @@
style)} style)}
(when accessibility-label (when accessibility-label
{:accessibility-label accessibility-label})) {:accessibility-label accessibility-label}))
[icons/icon icon (merge {:color (:icon-01 @colors/theme)} (cond
icon-opts)]]])) icon
[icons/icon icon (merge {:color (:icon-01 @colors/theme)}
icon-opts)]
component
component
(defn text-input [] :else
(let [focused (reagent/atom nil) nil)]]))
visible (reagent/atom false)
ref (react/create-ref) (defn text-input-raw []
on-cancel (fn [] (let [focused (reagent/atom nil)
(some-> (react/current-ref ref) (ocall "blur")))] visible (reagent/atom false)
ref (atom nil)
blur (fn []
(some-> @ref (ocall "blur")))]
(fn [{:keys [label multiline error style input-style keyboard-type before after (fn [{:keys [label multiline error style input-style keyboard-type before after
cancel-label on-focus on-blur show-cancel accessibility-label cancel-label on-focus on-blur show-cancel accessibility-label
bottom-value secure-text-entry container-style] bottom-value secure-text-entry container-style get-ref on-cancel
:or {cancel-label "Cancel" monospace]
show-cancel true} :or {cancel-label "Cancel"
:as props}] show-cancel true}
:as props}]
{:pre [(check-spec ::text-input props)]} {:pre [(check-spec ::text-input props)]}
(let [after (cond (let [after (cond
(and secure-text-entry @visible) (and secure-text-entry @visible)
@ -152,7 +166,11 @@
:on-press #(reset! visible true)} :on-press #(reset! visible true)}
:else after) :else after)
secure (and secure-text-entry (not @visible))] secure (and secure-text-entry (not @visible))
on-cancel (fn []
(when on-cancel
(on-cancel))
(blur))]
[rn/view {:style container-style} [rn/view {:style container-style}
(when label (when label
[text/text {:style (label-style)} [text/text {:style (label-style)}
@ -162,19 +180,23 @@
(when before (when before
[accessory-element before]) [accessory-element before])
[rn/text-input [rn/text-input
(merge {:style (text-input-style multiline input-style before after) (merge {:style (text-input-style multiline input-style monospace before after)
:ref ref :ref (fn [r]
(reset! ref r)
(when get-ref (get-ref r)))
:placeholder-text-color (:text-02 @colors/theme) :placeholder-text-color (:text-02 @colors/theme)
:underline-color-android :transparent :underline-color-android :transparent
:auto-capitalize :none :auto-capitalize :none
:secure-text-entry secure :secure-text-entry secure
:on-focus (fn [evt] :on-focus (fn [evt]
(when on-focus (on-focus evt)) (when on-focus (on-focus evt))
(rn/configure-next (:ease-in-ease-out rn/layout-animation-presets)) (when (and platform/ios? show-cancel)
(rn/configure-next (:ease-in-ease-out rn/layout-animation-presets)))
(reset! focused true)) (reset! focused true))
:on-blur (fn [evt] :on-blur (fn [evt]
(when on-blur (on-blur evt)) (when on-blur (on-blur evt))
(rn/configure-next (:ease-in-ease-out rn/layout-animation-presets)) (when (and platform/ios? show-cancel)
(rn/configure-next (:ease-in-ease-out rn/layout-animation-presets)))
(reset! focused false))} (reset! focused false))}
(when (and platform/ios? (not after)) (when (and platform/ios? (not after))
{:clear-button-mode :while-editing}) {:clear-button-mode :while-editing})
@ -183,7 +205,7 @@
{:keyboard-type keyboard-type}) {:keyboard-type keyboard-type})
(dissoc props (dissoc props
:style :keyboard-type :on-focus :on-blur :style :keyboard-type :on-focus :on-blur
:secure-text-entry :ref))] :secure-text-entry :ref :get-ref))]
(when after (when after
[accessory-element after])] [accessory-element after])]
(when (and platform/ios? (when (and platform/ios?
@ -192,13 +214,36 @@
@focused) @focused)
[rn/touchable-opacity {:style (cancel-style) [rn/touchable-opacity {:style (cancel-style)
:on-press on-cancel} :on-press on-cancel}
[text/text {:color :link} cancel-label]])] [text/text {:color :link} cancel-label]])
(when error (when error
[tooltip/tooltip (merge {:bottom-value (cond bottom-value bottom-value [tooltip/tooltip (merge {:bottom-value (cond bottom-value bottom-value
label 30 ; 22 line height 8 margin label 30 ; 22 line height 8 margin
)} )}
(when accessibility-label (when accessibility-label
{:accessibility-label (str (name accessibility-label) "-error")})) {:accessibility-label (str (name accessibility-label) "-error")}))
[text/text {:color :negative [text/text {:color :negative
:size :small} :align :center
error]])])))) :size :small}
error]])]]))))
;; TODO(Ferossgp): Refactor me when hooks available
(defn text-input [{:keys [preserve-input?]
:as props}]
(if preserve-input?
[text-input-raw props]
(let [ref (atom nil)]
(reagent/create-class
{:component-will-unmount
(fn []
(when @ref
(swap! text-input-refs dissoc @ref)))
:reagent-render
(fn [{:keys [get-ref default-value]
:as props}]
[text-input-raw (merge props
{:get-ref (fn [r]
;; Store input and its defaultValue
;; one we receive a non-nil ref
(when (and r (nil? @ref))
(swap! text-input-refs assoc r default-value))
(when get-ref (get-ref)))})])}))))

15
src/quo/components/tooltip.cljs
View File

@ -5,6 +5,7 @@
[quo.react-native :as rn] [quo.react-native :as rn]
[quo.design-system.colors :as colors] [quo.design-system.colors :as colors]
[quo.design-system.spacing :as spacing] [quo.design-system.spacing :as spacing]
[quo.platform :as platform]
[status-im.ui.components.icons.vector-icons :as vector-icons])) [status-im.ui.components.icons.vector-icons :as vector-icons]))
(def ^:private initial-height 22) (def ^:private initial-height 22)
@ -48,7 +49,8 @@
:height height})))] :height height})))]
(fn [{:keys [bottom-value]} & children] (fn [{:keys [bottom-value]} & children]
[:<> [:<>
[animated/code {:exec (animated/set animation-v 1)}] [animated/code {:exec (animated/cond* (animated/not* animation-v)
(animated/set animation-v 1))}]
[animated/view {:style (tooltip-style {:bottom-value (- (get @layout :height) [animated/view {:style (tooltip-style {:bottom-value (- (get @layout :height)
bottom-value) bottom-value)
:animation animation}) :animation animation})
@ -58,7 +60,10 @@
(into [rn/view {:style (content-style) (into [rn/view {:style (content-style)
:on-layout on-layout}] :on-layout on-layout}]
children) children)
[vector-icons/icon :icons/tooltip-tip {:width 18
:height 8 (when platform/ios?
:container-style {:elevation 3} ;; NOTE(Ferossgp): Android does not show elevation for tooltip making it lost on white bg
:color (:ui-background @colors/theme)}]]]]))) [vector-icons/icon :icons/tooltip-tip {:width 18
:height 8
:container-style {:elevation 3}
:color (:ui-background @colors/theme)}])]]])))

7
src/status_im/network/ui/edit_network/styles.cljs
View File

@ -6,13 +6,6 @@
:margin-horizontal 16 :margin-horizontal 16
:margin-vertical 15}) :margin-vertical 15})
(def input-container
{:margin-bottom 15})
(def network-type
{:flex-direction :row
:align-items :center})
(def bottom-container (def bottom-container
{:flex-direction :row {:flex-direction :row
:margin-horizontal 12 :margin-horizontal 12

42
src/status_im/network/ui/edit_network/views.cljs
View File

@ -8,7 +8,7 @@
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]
[status-im.ui.components.text-input.view :as text-input] [quo.core :as quo]
[status-im.ui.components.topbar :as topbar]) [status-im.ui.components.topbar :as topbar])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
@ -33,31 +33,31 @@
[topbar/topbar {:title :t/add-network}] [topbar/topbar {:title :t/add-network}]
[react/scroll-view [react/scroll-view
[react/view styles/edit-network-view [react/view styles/edit-network-view
[text-input/text-input-with-label [react/view {:padding-vertical 8}
{:label (i18n/label :t/name) [quo/text-input
:placeholder (i18n/label :t/specify-name) {:label (i18n/label :t/name)
:container styles/input-container :placeholder (i18n/label :t/specify-name)
:default-value (get-in manage-network [:name :value]) :default-value (get-in manage-network [:name :value])
:on-change-text #(re-frame/dispatch [::network/input-changed :name %]) :on-change-text #(re-frame/dispatch [::network/input-changed :name %])
:auto-focus true}] :auto-focus true}]]
[text-input/text-input-with-label [react/view {:padding-vertical 8}
{:label (i18n/label :t/rpc-url) [quo/text-input
:placeholder (i18n/label :t/specify-rpc-url) {:label (i18n/label :t/rpc-url)
:container styles/input-container :placeholder (i18n/label :t/specify-rpc-url)
:default-value (get-in manage-network [:url :value]) :default-value (get-in manage-network [:url :value])
:on-change-text #(re-frame/dispatch [::network/input-changed :url (string/lower-case %)])}] :on-change-text #(re-frame/dispatch [::network/input-changed :url (string/lower-case %)])}]]
[react/i18n-text {:key :network-chain}] [react/view {:padding-vertical 8}
[react/view styles/network-type [react/i18n-text {:key :network-chain}]
[list/flat-list {:data [:mainnet :testnet :rinkeby :custom] [list/flat-list {:data [:mainnet :testnet :rinkeby :custom]
:key-fn (fn [_ i] (str i)) :key-fn (fn [_ i] (str i))
:separator list/base-separator :separator list/base-separator
:render-fn #(render-network-type manage-network %)}]] :render-fn #(render-network-type manage-network %)}]]
(when custom? (when custom?
[text-input/text-input-with-label [react/view {:padding-vertical 8}
{:label (i18n/label :t/network-id) [quo/text-input
:container styles/input-container {:label (i18n/label :t/network-id)
:placeholder (i18n/label :t/specify-network-id) :placeholder (i18n/label :t/specify-network-id)
:on-change-text #(re-frame/dispatch [::network/input-changed :network-id %])}])]] :on-change-text #(re-frame/dispatch [::network/input-changed :network-id %])}]])]]
[react/view styles/bottom-container [react/view styles/bottom-container
[react/view components.styles/flex] [react/view components.styles/flex]
[components.common/bottom-button [components.common/bottom-button

27
src/status_im/ui/components/search_input/styles.cljs
View File

@ -1,27 +0,0 @@
(ns status-im.ui.components.search-input.styles
(:require [status-im.ui.components.colors :as colors]
[status-im.utils.styles :as styles]))
(styles/def search-input
{:flex 1
:android {:margin 0
:padding 0}})
(def search-input-height 56)
(defn search-container []
{:height search-input-height
:flex-direction :row
:padding-horizontal 16
:background-color colors/white
:align-items :center
:justify-content :center})
(defn search-input-container []
{:background-color colors/gray-lighter
:flex 1
:flex-direction :row
:height 36
:align-items :center
:justify-content :center
:border-radius 8})

66
src/status_im/ui/components/search_input/view.cljs
View File

@ -1,46 +1,34 @@
(ns status-im.ui.components.search-input.view (ns status-im.ui.components.search-input.view
(:require [reagent.core :as reagent] (:require [reagent.core :as reagent]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors] [quo.core :as quo]
[status-im.ui.components.icons.vector-icons :as icons] [quo.design-system.colors :as colors]))
[status-im.ui.components.react :as react]
[status-im.ui.components.search-input.styles :as styles]))
(defn search-input [{:keys [search-active?]}] (defn search-input [{:keys [search-active?]}]
(let [input-ref (atom nil) (let [input-ref (atom nil)
search-active? (or search-active? (reagent/atom nil))] search-active? (or search-active? (reagent/atom nil))]
(fn [{:keys [on-cancel on-focus on-change (fn [{:keys [on-focus on-change on-cancel search-filter auto-focus]}]
search-container-style search-filter auto-focus]}] [quo/text-input {:placeholder (i18n/label :t/search)
[react/view {:style (or search-container-style (styles/search-container))} :blur-on-submit true
[react/view {:style (styles/search-input-container)} :multiline false
[icons/icon :main-icons/search {:color colors/gray :ref #(reset! input-ref %)
:container-style {:margin-left 6 :default-value search-filter
:margin-right 2}}] :auto-focus auto-focus
[react/text-input {:placeholder (i18n/label :t/search) :on-cancel on-cancel
:blur-on-submit true :auto-correct false
:multiline false :auto-capitalize :none
:ref #(reset! input-ref %) :input-style {:height 36}
:style styles/search-input :before {:icon :main-icons/search
:default-value search-filter :style {:padding-horizontal 8}
:auto-focus auto-focus :on-press #(.focus ^js @input-ref)
:auto-correct false :icon-opts {:color (:icon-02 @colors/theme)}}
:auto-capitalize :none :on-focus #(do
:on-focus #(do (when on-focus
(when on-focus (on-focus search-filter))
(on-focus search-filter)) (reset! search-active? true))
(reset! search-active? true)) :on-blur #(reset! search-active? false)
:on-change (fn [e] :on-change (fn [e]
(let [^js native-event (.-nativeEvent ^js e) (let [^js native-event (.-nativeEvent ^js e)
text (.-text native-event)] text (.-text native-event)]
(when on-change (when on-change
(on-change text))))}]] (on-change text))))}])))
(when @search-active?
[react/touchable-highlight
{:on-press (fn []
(.clear ^js @input-ref)
(.blur ^js @input-ref)
(when on-cancel (on-cancel))
(reset! search-active? false))
:style {:margin-left 16}}
[react/text {:style {:color colors/blue}}
(i18n/label :t/cancel)]])])))

39
src/status_im/ui/components/text_input/styles.cljs
View File

@ -1,39 +0,0 @@
(ns status-im.ui.components.text-input.styles
(:require [status-im.ui.components.colors :as colors]
[status-im.utils.styles :as styles]))
(defn label [editable label-style]
(merge
{:margin-vertical 10}
label-style
(when-not editable {:color colors/gray})))
(defn input-container [height editable]
(merge
{:justify-content :center
:height (or height 52)
:border-radius 8
:background-color (when editable colors/gray-lighter)}
(when-not editable
{:border-color colors/gray-lighter
:border-width 1})))
(styles/def input
{:padding 16
:border-radius 8
:font-size 15
:line-height 22
:flex 1
:text-align-vertical :center
:desktop {:height 52}})
(defn error [bottom-value]
{:bottom-value bottom-value
:container-style {:shadow-offset {:width 0 :height 1}
:shadow-radius 6
:shadow-opacity 1
:shadow-color (if (colors/dark?)
"rgba(0, 0, 0, 0.75)"
"rgba(0, 34, 51)")
:elevation 2}
:font-size 12})

49
src/status_im/ui/components/text_input/view.cljs
View File

@ -1,49 +0,0 @@
(ns status-im.ui.components.text-input.view
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.text-input.styles :as styles]
[status-im.ui.components.colors :as colors]
[status-im.utils.platform :as platform]
[status-im.ui.components.tooltip.views :as tooltip]))
(defn merge-container-styles
[height container editable]
(let [merged-styles (merge (styles/input-container height editable) container)]
;; `:background-color` can't be nil; in this case the app will crash.
;; Nevertheless, we need to be able to remove background if necessary.
(if (nil? (:background-color merged-styles))
(dissoc merged-styles :background-color)
merged-styles)))
(defn text-input-with-label
[{:keys [label content error style height container accessibility-label
label-style parent-container bottom-value text editable keyboard-type]
:as props
:or {editable true}}]
[react/view {:style parent-container}
(when label
[react/text {:style (styles/label editable label-style)}
label])
[react/view {:style (merge-container-styles height container editable)}
[react/text-input
(merge
{:style (merge styles/input style)
:placeholder-text-color colors/gray
:auto-focus true
:auto-capitalize :none}
(cond-> (dissoc props :style :height)
;; error on ios
(and platform/ios? (= keyboard-type "visible-password"))
(dissoc :keyboard-type))
;; Workaround until `value` TextInput field is available on desktop:
;; https://github.com/status-im/react-native-desktop/issues/320
(when-not platform/desktop?
{:value text}))]
(when content content)]
(when error
[tooltip/tooltip error
(styles/error
(cond bottom-value bottom-value
label 20
:else 0))
(when accessibility-label
(str (name accessibility-label) "-error"))])])

41
src/status_im/ui/screens/add_new/new_chat/views.cljs
View File

@ -10,8 +10,8 @@
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.add-new.new-chat.styles :as styles] [status-im.ui.screens.add-new.new-chat.styles :as styles]
[status-im.ui.screens.add-new.styles :as add-new.styles]
[status-im.utils.debounce :as debounce] [status-im.utils.debounce :as debounce]
[quo.core :as quo]
[status-im.utils.utils :as utils]) [status-im.utils.utils :as utils])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
@ -26,13 +26,11 @@
(defn- icon-wrapper [color icon] (defn- icon-wrapper [color icon]
[react/view [react/view
{:style {:margin-right 16 {:style {:width 32
:margin-top 11 :height 32
:width 32 :border-radius 25
:height 32 :align-items :center
:border-radius 25 :justify-content :center
:align-items :center
:justify-content :center
:background-color color}} :background-color color}}
icon]) icon])
@ -68,12 +66,14 @@
:modal? true :modal? true
:accessories [{:icon :qr :accessories [{:icon :qr
:accessibility-label :scan-contact-code-button :accessibility-label :scan-contact-code-button
:handler #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed :handler #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed
{:title (i18n/label :t/new-contact) {:title (i18n/label :t/new-contact)
:handler :contact/qr-code-scanned}])}]}] :handler :contact/qr-code-scanned}])}]}]
[react/view add-new.styles/new-chat-container [react/view {:flex-direction :row
[react/view (add-new.styles/new-chat-input-container) :padding 16}
[react/text-input [react/view {:flex 1
:padding-right 16}
[quo/text-input
{:on-change-text {:on-change-text
#(do #(do
(re-frame/dispatch [:set-in [:contacts/new-identity :state] :searching]) (re-frame/dispatch [:set-in [:contacts/new-identity :state] :searching])
@ -82,16 +82,13 @@
#(when (= state :valid) #(when (= state :valid)
(debounce/dispatch-and-chill [:contact.ui/contact-code-submitted] 3000)) (debounce/dispatch-and-chill [:contact.ui/contact-code-submitted] 3000))
:placeholder (i18n/label :t/enter-contact-code) :placeholder (i18n/label :t/enter-contact-code)
:style add-new.styles/input :show-cancel false
;; This input is fine to preserve inputs
;; so its contents will not be erased
;; in onWillBlur navigation event handler
:preserve-input? true
:accessibility-label :enter-contact-code-input :accessibility-label :enter-contact-code-input
:auto-capitalize :none :auto-capitalize :none
:return-key-type :go}]] :return-key-type :go}]]
[react/view {:width 16}] [react/view {:justify-content :center
[input-icon state]] :align-items :center}
[input-icon state]]]
[react/view {:min-height 30 :justify-content :flex-end} [react/view {:min-height 30 :justify-content :flex-end}
[react/text {:style styles/message} [react/text {:style styles/message}
(cond (= state :error) (cond (= state :error)

23
src/status_im/ui/screens/add_new/new_public_chat/styles.cljs
View File

@ -1,28 +1,9 @@
(ns status-im.ui.screens.add-new.new-public-chat.styles (ns status-im.ui.screens.add-new.new-public-chat.styles)
(:require [status-im.ui.components.colors :as colors]))
(def group-chat-name-input (def group-chat-name-input
{:font-size 17 {:font-size 17
:padding-bottom 0}) :padding-bottom 0})
(def topic-hash
(merge group-chat-name-input
{:margin-left 16
:margin-right 10
:font-size 24
:color colors/gray
:font-weight "500"}))
(def group-container (def group-container
{:flex 1 {:flex 1
:flex-direction :column}) :flex-direction :column})
(def input-container
{:padding 0
:padding-right 16
:background-color nil})
(def tooltip
{:bottom-value 15
:color colors/red-light
:font-size 12})

46
src/status_im/ui/screens/add_new/new_public_chat/view.cljs
View File

@ -5,39 +5,37 @@
[status-im.react-native.resources :as resources] [status-im.react-native.resources :as resources]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.styles :as common.styles] [quo.core :as quo]
[status-im.ui.components.text-input.view :as text-input.view]
[status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.add-new.new-public-chat.db :as db] [status-im.ui.screens.add-new.new-public-chat.db :as db]
[status-im.ui.screens.add-new.new-public-chat.styles :as styles] [status-im.ui.screens.add-new.new-public-chat.styles :as styles])
[status-im.ui.screens.add-new.styles :as add-new.styles])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
(defn- start-chat [topic] (defn- start-chat [topic]
(re-frame/dispatch [:chat.ui/start-public-chat topic {:navigation-reset? true}]) (re-frame/dispatch [:chat.ui/start-public-chat topic {:navigation-reset? true}])
(re-frame/dispatch [:set :public-group-topic nil])) (re-frame/dispatch [:set :public-group-topic nil]))
(defn- hash-icon []
[quo/text {:color :secondary
:weight :medium
:size :x-large}
"#"])
(defn- chat-name-input [topic error] (defn- chat-name-input [topic error]
[react/view [quo/text-input
[react/view (add-new.styles/input-container) {:on-change-text #(re-frame/dispatch [:set :public-group-topic %])
[react/text {:style styles/topic-hash} "#"] :on-submit-editing #(when (db/valid-topic? topic) (start-chat topic))
[react/view common.styles/flex :auto-capitalize :none
[text-input.view/text-input-with-label :auto-focus false
{:container styles/input-container :accessibility-label :chat-name-input
:on-change-text #(re-frame/dispatch [:set :public-group-topic %]) :before {:component [hash-icon]}
:on-submit-editing #(when (db/valid-topic? topic) (start-chat topic)) ;; Set default-value as otherwise it will
:auto-capitalize :none ;; be erased in global `onWillBlur` handler
:auto-focus false :default-value topic
:accessibility-label :chat-name-input :placeholder "chat-name"
;; Set default-value as otherwise it will :return-key-type :go
;; be erased in global `onWillBlur` handler :auto-correct false
:default-value topic :error error}])
:placeholder "chat-name"
:return-key-type :go
:auto-correct false}]]]
(when error
[tooltip/tooltip error styles/tooltip])])
(defn render-topic [topic] (defn render-topic [topic]
^{:key topic} ^{:key topic}

24
src/status_im/ui/screens/add_new/styles.cljs
View File

@ -1,30 +1,10 @@
(ns status-im.ui.screens.add-new.styles (ns status-im.ui.screens.add-new.styles
(:require [status-im.ui.components.colors :as colors] (:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]))
[status-im.utils.styles :as styles]))
(def new-chat-container
{:flex-direction :row
:padding-top 16
:padding-left 16})
(defn input-container [] (defn input-container []
{:flex-direction :row {:flex-direction :row
:align-items :center :align-items :center
:margin-bottom 16 :margin-bottom 16
:border-radius components.styles/border-radius :border-radius components.styles/border-radius
:background-color colors/gray-lighter}) :background-color colors/gray-lighter})
(defn new-chat-input-container []
(merge
(input-container)
{:flex 1}))
(styles/def input
{:flex 1
:height 52
:padding-horizontal 14
:desktop {:height 30
:width "100%"}
:android {:padding 0
:width "100%"}})

15
src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs
View File

@ -3,21 +3,6 @@
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]
[status-im.utils.styles :as styles])) [status-im.utils.styles :as styles]))
(def input-container
{:flex-direction :row
:align-items :center
:justify-content :space-between
:border-radius components.styles/border-radius
:height 52
:margin-top 15})
(styles/def input
{:flex 1
:android {:padding 0}})
(def qr-code
{:margin-right 14})
(def edit-bootnode-view (def edit-bootnode-view
{:flex 1 {:flex 1
:margin-horizontal 16 :margin-horizontal 16

58
src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs
View File

@ -2,18 +2,14 @@
(:require [clojure.string :as string] (:require [clojure.string :as string]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.i18n :as i18n] [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.common.common :as components.common]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]
[status-im.ui.components.text-input.view :as text-input] [quo.core :as quo]
[status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.bootnodes-settings.edit-bootnode.styles [status-im.ui.screens.bootnodes-settings.edit-bootnode.styles
:as :as
styles] styles])
[status-im.utils.platform :as platform])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
(defn delete-button [id] (defn delete-button [id]
@ -24,14 +20,6 @@
[react/text {:style styles/button-label} [react/text {:style styles/button-label}
(i18n/label :t/delete)]]]]) (i18n/label :t/delete)]]]])
(def qr-code
[react/touchable-highlight {:on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed
{:title (i18n/label :t/add-bootnode)
:handler :bootnodes.callback/qr-code-scanned}])
:style styles/qr-code}
[react/view
[vector-icons/icon :main-icons/qr {:color colors/blue}]]])
(views/defview edit-bootnode [] (views/defview edit-bootnode []
(views/letsubs [manage-bootnode [:get-manage-bootnode] (views/letsubs [manage-bootnode [:get-manage-bootnode]
validation-errors [:manage-bootnode-validation-errors]] validation-errors [:manage-bootnode-validation-errors]]
@ -45,33 +33,33 @@
[topbar/topbar {:title (if id :t/bootnode-details :t/add-bootnode)}] [topbar/topbar {:title (if id :t/bootnode-details :t/add-bootnode)}]
[react/scroll-view {:keyboard-should-persist-taps :handled} [react/scroll-view {:keyboard-should-persist-taps :handled}
[react/view styles/edit-bootnode-view [react/view styles/edit-bootnode-view
[text-input/text-input-with-label [react/view {:padding-vertical 8}
{:label (i18n/label :t/name) [quo/text-input
:placeholder (i18n/label :t/specify-name) {:label (i18n/label :t/name)
:accessibility-label :bootnode-name :placeholder (i18n/label :t/specify-name)
:style styles/input :accessibility-label :bootnode-name
:container styles/input-container :default-value name
:default-value name :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :name %])
:on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :name %]) :auto-focus true}]]
:auto-focus true}]
[react/view [react/view
{:flex 1} {:flex 1
[text-input/text-input-with-label :padding-vertical 8}
[quo/text-input
(merge (merge
{:label (i18n/label :t/bootnode-address) {:label (i18n/label :t/bootnode-address)
:placeholder (i18n/label :t/bootnode-format) :placeholder (i18n/label :t/bootnode-format)
:style styles/input
:accessibility-label :bootnode-address :accessibility-label :bootnode-address
:container styles/input-container
:default-value url :default-value url
:on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %])} :show-cancel false
(when-not platform/desktop? {:content qr-code}))] :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %])
(when (and (not (string/blank? url)) invalid-url?) :error (when (and (not (string/blank? url)) invalid-url?)
[tooltip/tooltip (i18n/label :t/invalid-format (i18n/label :t/invalid-format
{:format (i18n/label :t/bootnode-format)}) {:format (i18n/label :t/bootnode-format)}))
{:color colors/red-light :bottom-value 0
:font-size 12 :after {:icon :main-icons/qr
:bottom-value 25}])] :on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed
{:title (i18n/label :t/add-bootnode)
:handler :bootnodes.callback/qr-code-scanned}])}})]]
(when id (when id
[delete-button id])]] [delete-button id])]]
[react/view styles/bottom-container [react/view styles/bottom-container

3
src/status_im/ui/screens/chat/styles/message/message.cljs
View File

@ -115,9 +115,6 @@
{:padding-top 3 {:padding-top 3
:padding-left 3}) :padding-left 3})
(def message-activity-indicator
{:padding-top 4})
(defn emoji-message (defn emoji-message
[{:keys [incoming-group]}] [{:keys [incoming-group]}]
{:font-size 28 {:font-size 28

30
src/status_im/ui/screens/currency_settings/views.cljs
View File

@ -32,18 +32,20 @@
[react/view {:flex 1} [react/view {:flex 1}
[topbar/topbar {:title :t/main-currency}] [topbar/topbar {:title :t/main-currency}]
[react/view {:flex 1} [react/view {:flex 1}
[search-input/search-input [react/view {:padding-horizontal 16
{:search-active? search-active? :padding-vertical 10}
:search-filter search-filter [search-input/search-input
:on-cancel #(re-frame/dispatch [:search/currency-filter-changed nil]) {:search-active? search-active?
:on-focus (fn [search-filter] :search-filter search-filter
(when-not search-filter :on-cancel #(re-frame/dispatch [:search/currency-filter-changed nil])
(re-frame/dispatch [:search/currency-filter-changed ""]))) :on-focus (fn [search-filter]
:on-change (fn [text] (when-not search-filter
(re-frame/dispatch [:search/currency-filter-changed text]))}] (re-frame/dispatch [:search/currency-filter-changed ""])))
[list/flat-list {:data (->> currencies :on-change (fn [text]
vals (re-frame/dispatch [:search/currency-filter-changed text]))}]]
(sort #(compare (:code %1) (:code %2)))) [list/flat-list {:data (->> currencies
:key-fn :code vals
:render-fn (render-currency currency-id) (sort #(compare (:code %1) (:code %2))))
:key-fn :code
:render-fn (render-currency currency-id)
:keyboardShouldPersistTaps :always}]]])) :keyboardShouldPersistTaps :always}]]]))

4
src/status_im/ui/screens/group/styles.cljs
View File

@ -24,7 +24,9 @@
(defn search-container [] (defn search-container []
{:border-bottom-color colors/gray-lighter {:border-bottom-color colors/gray-lighter
:border-bottom-width 1}) :border-bottom-width 1
:padding-horizontal 16
:padding-vertical 10})
(defn members-title [] (defn members-title []
{:color colors/gray {:color colors/gray

40
src/status_im/ui/screens/group/views.cljs
View File

@ -21,8 +21,8 @@
[status-im.ui.components.toolbar :as bottom-toolbar] [status-im.ui.components.toolbar :as bottom-toolbar]
[status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.add-new.styles :as add-new.styles]
[status-im.ui.screens.group.styles :as styles] [status-im.ui.screens.group.styles :as styles]
[quo.core :as quo]
[status-im.utils.debounce :as debounce] [status-im.utils.debounce :as debounce]
[status-im.utils.platform :as platform]) [status-im.utils.platform :as platform])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
@ -125,16 +125,14 @@
:max constants/max-group-chat-participants})]]]] :max constants/max-group-chat-participants})]]]]
[react/view {:style {:padding-top 16 [react/view {:style {:padding-top 16
:flex 1}} :flex 1}}
[react/view {:style {:padding-horizontal 16}} [react/view {:style {:padding-horizontal 16}}
[react/view (add-new.styles/input-container) [quo/text-input
[react/text-input {:auto-focus true
{:auto-focus true :on-change-text #(re-frame/dispatch [:set :new-chat-name %])
:on-change-text #(re-frame/dispatch [:set :new-chat-name %]) :default-value group-name
:default-value group-name :placeholder (i18n/label :t/set-a-topic)
:placeholder (i18n/label :t/set-a-topic) :accessibility-label :chat-name-input}]
:style add-new.styles/input
:accessibility-label :chat-name-input}]]
[react/text {:style (styles/members-title)} [react/text {:style (styles/members-title)}
(i18n/label :t/members-title)]] (i18n/label :t/members-title)]]
[react/view {:style {:margin-top 8 [react/view {:style {:margin-top 8
@ -242,18 +240,16 @@
[topbar/topbar [topbar/topbar
{:title :t/edit-group {:title :t/edit-group
:modal? true}] :modal? true}]
[react/view {:style {:padding 16 [react/scroll-view {:style {:padding 16
:flex 1}} :flex 1}}
[react/view {:style (add-new.styles/input-container)} [quo/text-input
[react/text-input {:on-change-text #(reset! new-group-chat-name %)
{:on-change-text #(reset! new-group-chat-name %) :default-value name
:default-value name :on-submit-editing #(when (seq @new-group-chat-name)
:on-submit-editing #(when (seq @new-group-chat-name) (re-frame/dispatch [:group-chats.ui/name-changed chat-id @new-group-chat-name]))
(re-frame/dispatch [:group-chats.ui/name-changed chat-id @new-group-chat-name])) :placeholder (i18n/label :t/enter-contact-code)
:placeholder (i18n/label :t/enter-contact-code) :accessibility-label :new-chat-name
:style add-new.styles/input :return-key-type :go}]]
:accessibility-label :new-chat-name
:return-key-type :go}]]]
[react/view {:style {:flex 1}}] [react/view {:style {:flex 1}}]
[bottom-toolbar/toolbar [bottom-toolbar/toolbar
{:show-border? true {:show-border? true

7
src/status_im/ui/screens/hardwallet/pin/styles.cljs
View File

@ -57,10 +57,6 @@
:height 22 :height 22
:margin-top 5}) :margin-top 5})
(def pin-indicator-group-container
{:flex-direction :row
:justify-content :space-between})
(defn pin-indicator [pressed? error?] (defn pin-indicator [pressed? error?]
{:width 8 {:width 8
:height 8 :height 8
@ -81,9 +77,6 @@
:border-radius 50 :border-radius 50
:margin-horizontal 5}) :margin-horizontal 5})
(def waiting-indicator-container
{:margin-top 26})
(def numpad-container (def numpad-container
{:margin-top 18}) {:margin-top 18})

20
src/status_im/ui/screens/home/views.cljs
View File

@ -86,15 +86,17 @@
(defonce search-active? (reagent/atom false)) (defonce search-active? (reagent/atom false))
(defn search-input-wrapper [search-filter] (defn search-input-wrapper [search-filter]
[search-input/search-input [react/view {:padding-horizontal 16
{:search-active? search-active? :padding-vertical 10}
:search-filter search-filter [search-input/search-input
:on-cancel #(re-frame/dispatch [:search/home-filter-changed nil]) {:search-active? search-active?
:on-focus (fn [search-filter] :search-filter search-filter
(when-not search-filter :on-cancel #(re-frame/dispatch [:search/home-filter-changed nil])
(re-frame/dispatch [:search/home-filter-changed ""]))) :on-focus (fn [search-filter]
:on-change (fn [text] (when-not search-filter
(re-frame/dispatch [:search/home-filter-changed text]))}]) (re-frame/dispatch [:search/home-filter-changed ""])))
:on-change (fn [text]
(re-frame/dispatch [:search/home-filter-changed text]))}]])
(views/defview chats-list [] (views/defview chats-list []
(views/letsubs [loading? [:chats/loading?] (views/letsubs [loading? [:chats/loading?]

121
src/status_im/ui/screens/intro/views.cljs
View File

@ -11,7 +11,6 @@
[status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.radio :as radio] [status-im.ui.components.radio :as radio]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.intro.styles :as styles] [status-im.ui.screens.intro.styles :as styles]
[status-im.utils.config :as config] [status-im.utils.config :as config]
@ -19,6 +18,7 @@
[status-im.utils.identicon :as identicon] [status-im.utils.identicon :as identicon]
[status-im.utils.platform :as platform] [status-im.utils.platform :as platform]
[status-im.utils.security :as security] [status-im.utils.security :as security]
[quo.core :as quo]
[status-im.utils.utils :as utils]) [status-im.utils.utils :as utils])
(:require-macros [status-im.utils.views :refer [defview letsubs]])) (:require-macros [status-im.utils.views :refer [defview letsubs]]))
@ -230,24 +230,23 @@
:max-height 16}}] :max-height 16}}]
[storage-entry (second storage-types) selected-storage-type]]]])) [storage-entry (second storage-types) selected-storage-type]]]]))
(defn password-container [confirm-failure? view-width] (defn password-container [confirm-failure? _]
(let [horizontal-margin 16] (let [horizontal-margin 16]
[react/view {:style {:flex 1 [react/view {:style {:flex 1
:justify-content :space-between :justify-content :space-between
:align-items :center :margin-horizontal horizontal-margin}} :margin-horizontal horizontal-margin}}
[react/view {:style {:justify-content :center :flex 1}} [react/view
[react/text {:style (assoc styles/wizard-text :color colors/red [react/text {:style (assoc styles/wizard-text :color colors/red
:margin-bottom 16)} :margin-bottom 16)}
(if confirm-failure? (i18n/label :t/password_error1) " ")] (if confirm-failure? (i18n/label :t/password_error1) " ")]]
[react/view {:padding 16}
[react/text-input {:secure-text-entry true [quo/text-input {:secure-text-entry true
:auto-capitalize :none :auto-capitalize :none
:auto-focus true :auto-focus true
:accessibility-label :password-input :show-cancel false
:text-align :center :accessibility-label :password-input
:placeholder "" :placeholder ""
:style (styles/password-text-input (- view-width (* 2 horizontal-margin))) :on-change-text #(re-frame/dispatch [:intro-wizard/code-symbol-pressed %])}]]
:on-change-text #(re-frame/dispatch [:intro-wizard/code-symbol-pressed %])}]]
[react/text {:style (assoc styles/wizard-text :margin-bottom 16)} (i18n/label :t/password-description)]])) [react/text {:style (assoc styles/wizard-text :margin-bottom 16)} (i18n/label :t/password-description)]]))
(defn create-code [{:keys [confirm-failure? view-width]}] (defn create-code [{:keys [confirm-failure? view-width]}]
@ -362,69 +361,45 @@
next-button-disabled? next-button-disabled?
passphrase-error]}] passphrase-error]}]
[react/keyboard-avoiding-view {:flex 1 [react/keyboard-avoiding-view {:flex 1
:justify-content :flex-start
:background-color colors/white} :background-color colors/white}
[text-input/text-input-with-label [react/view {:background-color colors/white
{:on-change-text #(re-frame/dispatch [:multiaccounts.recover/enter-phrase-input-changed (security/mask-data %)]) :flex 1
:auto-focus true :justify-content :center
:error (when passphrase-error (i18n/label passphrase-error)) :padding-horizontal 16}
:accessibility-label :passphrase-input [quo/text-input
:placeholder nil {:on-change-text #(re-frame/dispatch [:multiaccounts.recover/enter-phrase-input-changed (security/mask-data %)])
:bottom-value 40 :auto-focus true
:multiline true :error (when passphrase-error (i18n/label passphrase-error))
:auto-correct false :accessibility-label :passphrase-input
:keyboard-type "visible-password" :placeholder (i18n/label :t/seed-phrase-placeholder)
:parent-container {:flex 1 :show-cancel false
:justify-content :center} :bottom-value 40
:container (merge {:background-color colors/white :multiline true
:flex 1 :auto-correct false
:justify-content :center :monospace true}]
:min-height 90} [react/view {:align-items :flex-end}
(when platform/ios? [react/view {:flex-direction :row
{:max-height 150})) :align-items :center
:style {:background-color colors/white :padding-vertical 8
:text-align :center :opacity (if passphrase-word-count 1 0)}
:text-align-vertical :center [quo/text {:color (if next-button-disabled? :secondary :main)
:min-width 40 :size :small}
:font-size 16
:font-weight "700"}}]
[react/view {:align-items :center}
(if passphrase-word-count
[react/view {:flex-direction :row
:margin-bottom 4
:min-height 24
:max-height 24
:align-items :center}
[react/nested-text {:style {:font-size 14
:padding-right 4
:text-align :center
:color colors/gray}}
(str (i18n/label :t/word-count) ": ")
[{:style {:font-weight "500"
:color colors/black}}
(i18n/label-pluralize passphrase-word-count :t/words-n)]]
(when-not next-button-disabled? (when-not next-button-disabled?
[react/view {:style {:background-color colors/green-transparent-10 "✓ ")
:border-radius 12 (i18n/label-pluralize passphrase-word-count :t/words-n)]]]]
:width 24 [react/view {:align-items :center}
:justify-content :center
:align-items :center
:height 24}}
[vector-icons/tiny-icon :tiny-icons/tiny-check {:color colors/green}]])]
[react/view {:align-self :stretch :margin-bottom 4
:max-height 24 :min-height 24}])
[react/text {:style {:color colors/gray [react/text {:style {:color colors/gray
:font-size 14 :font-size 14
:margin-bottom 8 :margin-bottom 8
:text-align :center}} :text-align :center}}
(i18n/label :t/multiaccounts-recover-enter-phrase-text)]] (i18n/label :t/multiaccounts-recover-enter-phrase-text)]
(when processing? (when processing?
[react/view {:flex 1 :align-items :center} [react/view {:flex 1 :align-items :center}
[react/activity-indicator {:size :large [react/activity-indicator {:size :large
:animating true}] :animating true}]
[react/text {:style {:color colors/gray [react/text {:style {:color colors/gray
:margin-top 8}} :margin-top 8}}
(i18n/label :t/processing)]])]) (i18n/label :t/processing)]])]])
(defn recovery-success [pubkey name photo-path] (defn recovery-success [pubkey name photo-path]
[react/view {:flex 1 [react/view {:flex 1

25
src/status_im/ui/screens/keycard/onboarding/views.cljs
View File

@ -8,12 +8,12 @@
[status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.hardwallet.pin.views :as pin.views] [status-im.ui.screens.hardwallet.pin.views :as pin.views]
[status-im.ui.screens.keycard.styles :as styles] [status-im.ui.screens.keycard.styles :as styles]
[quo.core :as quo]
[status-im.constants :as constants]) [status-im.constants :as constants])
(:require-macros [status-im.utils.views :refer [defview letsubs]])) (:require-macros [status-im.utils.views :refer [defview letsubs]]))
@ -324,9 +324,9 @@
[toolbar/toolbar [toolbar/toolbar
{:transparent? true} {:transparent? true}
[toolbar/nav-text [toolbar/nav-text
{:handler #(re-frame/dispatch [::hardwallet.onboarding/cancel-pressed]) {:handler #(re-frame/dispatch [::hardwallet.onboarding/cancel-pressed])
:accessibility-label :cancel-keycard-setup :accessibility-label :cancel-keycard-setup
:style {:padding-left 21}} :style {:padding-left 21}}
(i18n/label :t/cancel)] (i18n/label :t/cancel)]
[react/text {:style {:color colors/gray}} [react/text {:style {:color colors/gray}}
(i18n/label :t/step-i-of-n {:step 3 :number 3})]] (i18n/label :t/step-i-of-n {:step 3 :number 3})]]
@ -348,20 +348,17 @@
:accessibility-label :word-number} :accessibility-label :word-number}
(i18n/label :t/word-n {:number (inc idx)})]]] (i18n/label :t/word-n {:number (inc idx)})]]]
[react/view [react/view {:flex 1
[text-input/text-input-with-label :padding 16
:justify-content :center}
[quo/text-input
{:on-change-text #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/input-changed %]) {:on-change-text #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/input-changed %])
:auto-focus true :auto-focus true
:on-submit-editing #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/input-submitted]) :on-submit-editing #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/input-submitted])
:placeholder nil :placeholder (i18n/label :t/word-n {:number (inc idx)})
:auto-correct false :auto-correct false
:keyboard-type "visible-password"
:accessibility-label :enter-word :accessibility-label :enter-word
:container {:background-color colors/white} :monospace true}]
:style {:background-color colors/white
:text-align :center
:height 52
:typography :header}}]
[react/view {:margin-top 5 [react/view {:margin-top 5
:width 250} :width 250}
[tooltip/tooltip error]]] [tooltip/tooltip error]]]
@ -380,5 +377,5 @@
{:on-press #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/next-pressed]) {:on-press #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/next-pressed])
:label (i18n/label :t/next) :label (i18n/label :t/next)
:accessibility-label :next :accessibility-label :next
:disabled? (empty? input-word) :disabled? (empty? input-word)
:forward? true}]]]]]))) :forward? true}]]]]])))

21
src/status_im/ui/screens/keycard/recovery/views.cljs
View File

@ -7,7 +7,6 @@
[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 vector-icons] [status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
@ -16,6 +15,7 @@
[status-im.utils.core :as utils.core] [status-im.utils.core :as utils.core]
[status-im.utils.gfycat.core :as gfy] [status-im.utils.gfycat.core :as gfy]
[status-im.constants :as constants] [status-im.constants :as constants]
[quo.core :as quo]
[status-im.ui.screens.keycard.views :as keycard.views] [status-im.ui.screens.keycard.views :as keycard.views]
[status-im.utils.identicon :as identicon]) [status-im.utils.identicon :as identicon])
(:require-macros [status-im.utils.views :refer [defview letsubs]])) (:require-macros [status-im.utils.views :refer [defview letsubs]]))
@ -147,16 +147,15 @@
:color (if (> 3 free-pairing-slots) colors/red colors/gray)}} :color (if (> 3 free-pairing-slots) colors/red colors/gray)}}
(i18n/label :t/keycard-free-pairing-slots {:n free-pairing-slots})]])] (i18n/label :t/keycard-free-pairing-slots {:n free-pairing-slots})]])]
[react/view [react/view
[text-input/text-input-with-label [react/view {:flex 1
{:on-change-text #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-changed %]) :padding 16
:auto-focus true :justify-content :center}
:on-submit-editing #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-submitted]) [quo/text-input
:placeholder nil {:on-change-text #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-changed %])
:text-align :center :auto-focus true
:container {:background-color colors/white} :on-submit-editing #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-submitted])
:style {:background-color colors/white :placeholder (i18n/label :t/pair-code-placeholder)
:height 24 :monospace true}]]
:typography :header}}]
[react/view {:margin-top 5 [react/view {:margin-top 5
:width 250} :width 250}
[tooltip/tooltip error]]] [tooltip/tooltip error]]]

7
src/status_im/ui/screens/multiaccounts/login/views.cljs
View File

@ -6,13 +6,13 @@
[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.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.screens.chat.photos :as photos] [status-im.ui.screens.chat.photos :as photos]
[status-im.ui.screens.multiaccounts.login.styles :as styles] [status-im.ui.screens.multiaccounts.login.styles :as styles]
[status-im.ui.screens.multiaccounts.styles :as ast] [status-im.ui.screens.multiaccounts.styles :as ast]
[status-im.utils.platform :as platform] [status-im.utils.platform :as platform]
[status-im.utils.security :as security] [status-im.utils.security :as security]
[status-im.utils.utils :as utils] [status-im.utils.utils :as utils]
[quo.core :as quo]
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.topbar :as topbar]) [status-im.ui.components.topbar :as topbar])
(:require-macros [status-im.utils.views :refer [defview letsubs]])) (:require-macros [status-im.utils.views :refer [defview letsubs]]))
@ -53,11 +53,12 @@
:important-for-accessibility :no-hide-descendants} :important-for-accessibility :no-hide-descendants}
[react/view {:flex-direction :row :align-items :center} [react/view {:flex-direction :row :align-items :center}
[react/view {:flex 1} [react/view {:flex 1}
[text-input/text-input-with-label [quo/text-input
{:placeholder (i18n/label :t/enter-your-password) {:placeholder (i18n/label :t/enter-your-password)
:ref #(reset! password-text-input %) :get-ref #(reset! password-text-input %)
:auto-focus (= view-id :login) :auto-focus (= view-id :login)
:accessibility-label :password-input :accessibility-label :password-input
:show-cancel false
:on-submit-editing (when sign-in-enabled? :on-submit-editing (when sign-in-enabled?
#(login-multiaccount @password-text-input)) #(login-multiaccount @password-text-input))
:on-change-text #(do :on-change-text #(do

11
src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles (ns status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles
(:require [status-im.ui.components.styles :as components.styles] (:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.colors :as colors]
[status-im.utils.styles :as styles])) [status-im.utils.styles :as styles]))
(def edit-mailserver-view (def edit-mailserver-view
@ -8,14 +7,6 @@
:margin-horizontal 16 :margin-horizontal 16
:margin-vertical 15}) :margin-vertical 15})
(def input-container
{:flex-direction :row
:align-items :center
:justify-content :space-between
:border-radius components.styles/border-radius
:height 52
:margin-bottom 15})
(def qr-code (def qr-code
{:padding 16}) {:padding 16})

38
src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs
View File

@ -8,10 +8,9 @@
[status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]
[status-im.ui.components.common.common :as components.common] [status-im.ui.components.common.common :as components.common]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles :as styles] [status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles :as styles]
[status-im.ui.components.tooltip.views :as tooltip]
[clojure.string :as string] [clojure.string :as string]
[quo.core :as quo]
[status-im.ui.components.topbar :as topbar])) [status-im.ui.components.topbar :as topbar]))
(defn connect-button [id] (defn connect-button [id]
@ -54,29 +53,26 @@
[topbar/topbar {:title (if id :t/mailserver-details :t/add-mailserver)}] [topbar/topbar {:title (if id :t/mailserver-details :t/add-mailserver)}]
[react/scroll-view {:keyboard-should-persist-taps :handled} [react/scroll-view {:keyboard-should-persist-taps :handled}
[react/view styles/edit-mailserver-view [react/view styles/edit-mailserver-view
[text-input/text-input-with-label [react/view {:padding-vertical 8}
{:label (i18n/label :t/name) [quo/text-input
:placeholder (i18n/label :t/specify-name) {:label (i18n/label :t/name)
:container styles/input-container :placeholder (i18n/label :t/specify-name)
:default-value name :default-value name
:on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :name %]) :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :name %])
:auto-focus true}] :auto-focus true}]]
[react/view [react/view {:flex 1
{:flex 1} :padding-vertical 8}
[text-input/text-input-with-label [quo/text-input
{:label (i18n/label :t/mailserver-address) {:label (i18n/label :t/mailserver-address)
:placeholder (i18n/label :t/mailserver-format) :placeholder (i18n/label :t/mailserver-format)
:content qr-code :content qr-code
:container styles/input-container
:default-value url :default-value url
:on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :url %])}] :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :url %])
(when (and (not (string/blank? url)) :bottom-value 0
invalid-url?) :error (when (and (not (string/blank? url))
[tooltip/tooltip (i18n/label :t/invalid-format invalid-url?)
{:format (i18n/label :t/mailserver-format)}) (i18n/label :t/invalid-format
{:color colors/red-light {:format (i18n/label :t/mailserver-format)}))}]]
:font-size 12
:bottom-value 25}])]
(when (and id (when (and id
(not connected?)) (not connected?))
[react/view [react/view

15
src/status_im/ui/screens/pairing/styles.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.ui.screens.pairing.styles (ns status-im.ui.screens.pairing.styles
(:require [status-im.ui.components.colors :as colors] (:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.styles :as components.styles]
[status-im.utils.styles :as styles])) [status-im.utils.styles :as styles]))
(def wrapper (def wrapper
@ -76,16 +75,4 @@
(def bottom-container (def bottom-container
{:flex-direction :row {:flex-direction :row
:margin-horizontal 12 :margin-horizontal 12
:margin-vertical 15}) :margin-vertical 15})
(def input-container
{:flex-direction :row
:align-items :center
:justify-content :space-between
:border-radius components.styles/border-radius
:height 52
:margin-top 15})
(styles/def input
{:flex 1
:android {:padding 0}})

18
src/status_im/ui/screens/pairing/views.cljs
View File

@ -12,7 +12,7 @@
[status-im.ui.components.checkbox.view :as checkbox.views] [status-im.ui.components.checkbox.view :as checkbox.views]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.text-input.view :as text-input] [quo.core :as quo]
[status-im.ui.screens.pairing.styles :as styles] [status-im.ui.screens.pairing.styles :as styles]
[status-im.ui.components.topbar :as topbar])) [status-im.ui.components.topbar :as topbar]))
@ -138,15 +138,13 @@
[react/keyboard-avoiding-view styles/edit-installation [react/keyboard-avoiding-view styles/edit-installation
[react/scroll-view {:keyboard-should-persist-taps :handled} [react/scroll-view {:keyboard-should-persist-taps :handled}
[react/view [react/view
[react/text (i18n/label :t/pairing-please-set-a-name)]] [quo/text-input
[text-input/text-input-with-label {:placeholder (i18n/label :t/specify-name)
{:placeholder (i18n/label :t/specify-name) :label (i18n/label :t/pairing-please-set-a-name)
:style styles/input :accessibility-label :device-name
:accessibility-label :device-name :default-value @installation-name
:container styles/input-container :on-change-text #(reset! installation-name %)
:default-value @installation-name :auto-focus true}]]]
:on-change-text #(reset! installation-name %)
:auto-focus true}]]
[react/view styles/bottom-container [react/view styles/bottom-container
[react/view components.styles/flex] [react/view components.styles/flex]
[components.common/bottom-button [components.common/bottom-button

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

@ -3,38 +3,6 @@
;; profile header elements ;; profile header elements
(def profile-header-display
{:flex-direction :row
:justify-content :flex-start
:align-items :center})
(def profile-name-text
{:typography :header
:line-height 28
:text-align :left})
(def profile-name-text-with-subtitle
{:margin-vertical 5
:typography :header
:line-height 28
:text-align :left})
(def profile-three-words
{:color colors/gray})
(def profile-header-name-container
{:flex 1
:justify-content :center
:align-items :flex-start
:margin-left 16})
(def profile-header-name-container-with-subtitle
{:flex 1
:justify-content :flex-start
:align-items :flex-start
:align-self :stretch
:margin-left 16})
;; settings items elements ;; settings items elements
(def settings-item (def settings-item

11
src/status_im/ui/screens/profile/seed/styles.cljs
View File

@ -71,17 +71,6 @@
{:flex 1 {:flex 1
:padding 16}) :padding 16})
(def enter-word-row
{:flex-direction :row})
(def enter-word-label
{:font-size 14})
(def enter-word-n
{:margin-left 8
:font-size 14
:color colors/gray})
(def enter-word-n-description (def enter-word-n-description
{:font-size 14 {:font-size 14
:color colors/gray}) :color colors/gray})

19
src/status_im/ui/screens/profile/seed/views.cljs
View File

@ -7,13 +7,13 @@
[status-im.ui.components.common.common :as components.common] [status-im.ui.components.common.common :as components.common]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.common.styles :as components.common.styles] [status-im.ui.components.common.styles :as components.common.styles]
[clojure.string :as string] [clojure.string :as string]
[status-im.utils.utils :as utils] [status-im.utils.utils :as utils]
[status-im.ui.screens.profile.seed.styles :as styles] [status-im.ui.screens.profile.seed.styles :as styles]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[quo.core :as quo]
[status-im.utils.platform :as platform])) [status-im.utils.platform :as platform]))
(def steps-numbers (def steps-numbers
@ -77,10 +77,15 @@
{:forward? true {:forward? true
:on-press #(re-frame/dispatch [:my-profile/enter-two-random-words])}]]])) :on-press #(re-frame/dispatch [:my-profile/enter-two-random-words])}]]]))
(defview input [error next-handler] (defview input [error next-handler idx]
(letsubs [ref (reagent/atom nil)] (letsubs [ref (reagent/atom nil)]
[text-input/text-input-with-label [quo/text-input
{:placeholder (i18n/label :t/enter-word) {:placeholder (i18n/label :t/enter-word)
:label [:<>
(i18n/label :t/check-your-recovery-phrase)
" "
[quo/text {:color :secondary}
(i18n/label :t/word-n {:number (inc idx)})]]
:ref (partial reset! ref) :ref (partial reset! ref)
:auto-focus true :auto-focus true
:auto-correct false :auto-correct false
@ -106,12 +111,8 @@
(defn enter-word [step [idx word] error entered-word] (defn enter-word [step [idx word] error entered-word]
^{:key word} ^{:key word}
[react/view {:style styles/enter-word-container} [react/view {:style styles/enter-word-container}
[react/view {:style styles/enter-word-row} [react/view {:padding-bottom 8}
[react/text {:style styles/enter-word-label} [input error (next-handler word entered-word step) idx]]
(i18n/label :t/check-your-recovery-phrase)]
[react/text {:style styles/enter-word-n}
(i18n/label :t/word-n {:number (inc idx)})]]
[input error (next-handler word entered-word step)]
[react/text {:style styles/enter-word-n-description} [react/text {:style styles/enter-word-n-description}
(i18n/label :t/word-n-description {:number (inc idx)})] (i18n/label :t/word-n-description {:number (inc idx)})]
[react/view styles/twelve-words-spacer] [react/view styles/twelve-words-spacer]

4
src/status_im/ui/screens/routing/core.cljs
View File

@ -10,6 +10,8 @@
[taoensso.timbre :as log] [taoensso.timbre :as log]
[status-im.utils.platform :as platform] [status-im.utils.platform :as platform]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
;; NOTE(Ferossgp): This is temporary to mimic the behaviour of old input
[quo.components.text-input :as quo]
[oops.core :refer [ocall oget]])) [oops.core :refer [ocall oget]]))
(def navigation-container (reagent/adapt-react-class NavigationContainer)) (def navigation-container (reagent/adapt-react-class NavigationContainer))
@ -57,6 +59,8 @@
(fn [] (fn []
;; Reset currently mounted text inputs to their default values ;; Reset currently mounted text inputs to their default values
;; on navigating away; this is a privacy measure ;; on navigating away; this is a privacy measure
(doseq [[^js text-input default-value] @quo/text-input-refs]
(.setNativeProps text-input (clj->js {:text default-value})))
(doseq [[^js text-input default-value] @react/text-input-refs] (doseq [[^js text-input default-value] @react/text-input-refs]
(.setNativeProps text-input (clj->js {:text default-value})))))) (.setNativeProps text-input (clj->js {:text default-value}))))))
#js [navigation])) #js [navigation]))

21
src/status_im/ui/screens/signing/sheets.cljs
View File

@ -2,7 +2,7 @@
(:require-macros [status-im.utils.views :as views]) (:require-macros [status-im.utils.views :as views])
(:require [status-im.ui.components.react :as react] (:require [status-im.ui.components.react :as react]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.ui.components.text-input.view :as text-input] [quo.core :as quo]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.button :as button] [status-im.ui.components.button :as button]
[status-im.ui.components.colors :as colors])) [status-im.ui.components.colors :as colors]))
@ -12,9 +12,11 @@
[react/view [react/view
[react/view {:style {:margin-horizontal 16 :margin-top 8}} [react/view {:style {:margin-horizontal 16 :margin-top 8}}
[react/text {:style {:typography :title-bold}} (i18n/label :t/network-fee)] [react/text {:style {:typography :title-bold}} (i18n/label :t/network-fee)]
[react/view {:style {:flex-direction :row :margin-top 8}} [react/view {:style {:flex-direction :row
:margin-top 8
:align-items :flex-end}}
[react/view {:flex 1} [react/view {:flex 1}
[text-input/text-input-with-label [quo/text-input
{:on-change-text #(re-frame/dispatch [:signing.edit-fee.ui/edit-value :gas %]) {:on-change-text #(re-frame/dispatch [:signing.edit-fee.ui/edit-value :gas %])
:label (i18n/label :t/gas-limit) :label (i18n/label :t/gas-limit)
:error (:error gas-edit) :error (:error gas-edit)
@ -22,9 +24,11 @@
:keyboard-type :numeric :keyboard-type :numeric
:auto-capitalize :none :auto-capitalize :none
:placeholder "0" :placeholder "0"
:show-cancel false
:auto-focus false}]] :auto-focus false}]]
[react/view {:flex 1 :margin-left 33} [react/view {:flex 1
[text-input/text-input-with-label :padding-left 16}
[quo/text-input
{:label (i18n/label :t/gas-price) {:label (i18n/label :t/gas-price)
:on-change-text #(re-frame/dispatch [:signing.edit-fee.ui/edit-value :gasPrice %]) :on-change-text #(re-frame/dispatch [:signing.edit-fee.ui/edit-value :gasPrice %])
:error (:error gas-price-edit) :error (:error gas-price-edit)
@ -32,9 +36,12 @@
:keyboard-type :numeric :keyboard-type :numeric
:auto-capitalize :none :auto-capitalize :none
:placeholder "0.000" :placeholder "0.000"
:show-cancel false
:auto-focus false}]] :auto-focus false}]]
[react/view {:margin-top 58 :margin-left 10} [react/view {:padding-left 8
:padding-bottom 12}
[react/text (i18n/label :t/gwei)]]] [react/text (i18n/label :t/gwei)]]]
[react/view {:margin-vertical 16 :align-items :center} [react/view {:margin-vertical 16 :align-items :center}
[react/text {:style {:color colors/gray}} (i18n/label :t/wallet-transaction-total-fee)] [react/text {:style {:color colors/gray}} (i18n/label :t/wallet-transaction-total-fee)]
[react/view {:height 8}] [react/view {:height 8}]
@ -51,4 +58,4 @@
{:type :secondary {:type :secondary
:on-press #(re-frame/dispatch [:signing.edit-fee.ui/submit]) :on-press #(re-frame/dispatch [:signing.edit-fee.ui/submit])
:disabled? (or (:error gas-edit) (:error gas-price-edit)) :disabled? (or (:error gas-edit) (:error gas-price-edit))
:label :t/update}]]])) :label :t/update}]]]))

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

@ -57,23 +57,4 @@
:padding-left 16 :padding-left 16
:color (if disabled? colors/black colors/white-persist) :color (if disabled? colors/black colors/white-persist)
:padding-horizontal 16 :padding-horizontal 16
:padding-vertical 10}) :padding-vertical 10})
(defn sheet-title [small-screen?]
{:font-weight "500"
:font-size (if small-screen? 16 19)
:margin-top 16})
(defn sheet-subtitle [small-screen?]
{:font-size (if small-screen? 16 19)
:text-align :center
:margin-bottom 12
:color colors/gray})
(defn sheet-icon [bg-color]
{:height 64
:width 64
:border-radius 32
:justify-content :center
:align-items :center
:background-color bg-color})

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

@ -13,7 +13,7 @@
[status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet] [status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet]
[status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.chat-icon.screen :as chat-icon]
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.text-input.view :as text-input] [quo.core :as quo]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.utils.security :as security] [status-im.utils.security :as security]
[status-im.ui.screens.signing.sheets :as sheets] [status-im.ui.screens.signing.sheets :as sheets]
@ -258,15 +258,17 @@
:password :password
[react/view {:padding-top 8 :padding-bottom 8} [react/view {:padding-top 8 :padding-bottom 8}
[signing-phrase-view phrase] [signing-phrase-view phrase]
[text-input/text-input-with-label [react/view {:padding-horizontal 16
{:secure-text-entry true :padding-vertical 12}
:placeholder (i18n/label :t/enter-password) [quo/text-input
:on-change-text #(re-frame/dispatch [:signing.ui/password-is-changed (security/mask-data %)]) {:secure-text-entry true
:accessibility-label :enter-password-input :placeholder (i18n/label :t/enter-password)
:auto-capitalize :none :on-change-text #(re-frame/dispatch [:signing.ui/password-is-changed (security/mask-data %)])
:editable (not in-progress?) :accessibility-label :enter-password-input
:error error :auto-capitalize :none
:container {:margin-top 12 :margin-bottom 12 :margin-horizontal 16}}] :editable (not in-progress?)
:error error
:show-cancel false}]]
[react/view {:align-items :center :height 60} [react/view {:align-items :center :height 60}
(if in-progress? (if in-progress?
[react/activity-indicator {:animating true [react/activity-indicator {:animating true

7
src/status_im/ui/screens/wallet/account_settings/views.cljs
View File

@ -1,7 +1,6 @@
(ns status-im.ui.screens.wallet.account-settings.views (ns status-im.ui.screens.wallet.account-settings.views
(:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [status-im.ui.components.react :as react] (:require [status-im.ui.components.react :as react]
[status-im.ui.components.text-input.view :as text-input]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
@ -9,6 +8,7 @@
[status-im.ui.components.toolbar :as toolbar] [status-im.ui.components.toolbar :as toolbar]
[status-im.ui.components.copyable-text :as copyable-text] [status-im.ui.components.copyable-text :as copyable-text]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo.core :as quo]
[status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.topbar :as topbar])) [status-im.ui.components.topbar :as topbar]))
@ -57,14 +57,13 @@
:style {:flex 1}} :style {:flex 1}}
[react/view {:padding-bottom 28 :padding-top 10} [react/view {:padding-bottom 28 :padding-top 10}
[react/view {:margin-horizontal 16} [react/view {:margin-horizontal 16}
[text-input/text-input-with-label [quo/text-input
{:label (i18n/label :t/account-name) {:label (i18n/label :t/account-name)
:label-style {:color colors/gray}
:auto-focus false :auto-focus false
:default-value (:name account) :default-value (:name account)
:accessibility-label :enter-account-name :accessibility-label :enter-account-name
:on-change-text #(swap! new-account assoc :name %)}] :on-change-text #(swap! new-account assoc :name %)}]
[react/text {:style {:margin-top 30 :color colors/gray}} (i18n/label :t/account-color)] [react/text {:style {:margin-top 16 :color colors/gray}} (i18n/label :t/account-color)]
[react/touchable-highlight [react/touchable-highlight
{:on-press #(re-frame/dispatch [:show-popover {:on-press #(re-frame/dispatch [:show-popover
{:view [colors-popover color {:view [colors-popover color

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

@ -11,13 +11,12 @@
[status-im.ui.components.toolbar :as toolbar] [status-im.ui.components.toolbar :as toolbar]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.utils.utils :as utils.utils] [status-im.utils.utils :as utils.utils]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.screens.wallet.account-settings.views :as account-settings] [status-im.ui.screens.wallet.account-settings.views :as account-settings]
[status-im.ethereum.core :as ethereum] [status-im.ethereum.core :as ethereum]
[status-im.utils.security :as security] [status-im.utils.security :as security]
[clojure.string :as string] [clojure.string :as string]
[status-im.utils.platform :as platform] [quo.core :as quo]
[status-im.ui.components.bottom-panel.views :as bottom-panel])) [status-im.ui.components.bottom-panel.views :as bottom-panel]))
(defn- request-camera-permissions [] (defn- request-camera-permissions []
@ -48,8 +47,8 @@
:handler #(request-camera-permissions)}]}))])) :handler #(request-camera-permissions)}]}))]))
(defn common-settings [account] (defn common-settings [account]
[react/view {:margin-horizontal 16 :margin-top 30} [react/view {:margin-horizontal 16}
[text-input/text-input-with-label [quo/text-input
{:label (i18n/label :t/account-name) {:label (i18n/label :t/account-name)
:auto-focus false :auto-focus false
:default-value (:name account) :default-value (:name account)
@ -65,24 +64,25 @@
(re-frame/dispatch [:set-in [:add-account :account :color] new-color]) (re-frame/dispatch [:set-in [:add-account :account :color] new-color])
(re-frame/dispatch [:hide-popover]))] (re-frame/dispatch [:hide-popover]))]
:style {:max-height "60%"}}])} :style {:max-height "60%"}}])}
[react/view {:height 52 :margin-top 12 :background-color (:color account) :border-radius 8 [react/view {:height 52 :margin-top 12 :background-color (:color account) :border-radius 8
:align-items :flex-end :justify-content :center :padding-right 12} :align-items :flex-end :justify-content :center :padding-right 12}
[icons/icon :main-icons/dropdown {:color colors/white}]]]]) [icons/icon :main-icons/dropdown {:color colors/white}]]]])
(defn settings [{:keys [type scanned-address password-error account-error]} (defn settings [{:keys [type scanned-address password-error account-error]}
entered-password] entered-password]
[react/view {:margin-horizontal 16} [react/view {:padding-horizontal 16
:padding-vertical 16}
(if (= type :watch) (if (= type :watch)
[text-input/text-input-with-label [quo/text-input
{:label (i18n/label :t/wallet-key-title) {:label (i18n/label :t/wallet-key-title)
:auto-focus false :auto-focus false
:default-value scanned-address :default-value scanned-address
:placeholder (i18n/label :t/enter-address) :placeholder (i18n/label :t/enter-address)
:accessibility-label :add-account-enter-watch-address :accessibility-label :add-account-enter-watch-address
:on-change-text #(re-frame/dispatch [:set-in [:add-account :address] %])}] :on-change-text #(re-frame/dispatch [:set-in [:add-account :address] %])}]
[text-input/text-input-with-label [quo/text-input
{:label (i18n/label :t/password) {:label (i18n/label :t/password)
:parent-container {:margin-top 30} :show-cancel false
:auto-focus false :auto-focus false
:placeholder (i18n/label :t/enter-your-password) :placeholder (i18n/label :t/enter-your-password)
:secure-text-entry true :secure-text-entry true
@ -93,39 +93,37 @@
(re-frame/dispatch [:set-in [:add-account :password-error] nil]) (re-frame/dispatch [:set-in [:add-account :password-error] nil])
(reset! entered-password %))}]) (reset! entered-password %))}])
(when (= type :seed) (when (= type :seed)
[text-input/text-input-with-label [react/view {:padding-top 16}
{:parent-container {:margin-top 30} [quo/text-input
:label (i18n/label :t/recovery-phrase) {:label (i18n/label :t/recovery-phrase)
:auto-focus false :auto-focus false
:placeholder (i18n/label :t/multiaccounts-recover-enter-phrase-title) :placeholder (i18n/label :t/multiaccounts-recover-enter-phrase-title)
:auto-correct false :auto-correct false
:keyboard-type "visible-password" :keyboard-type "visible-password"
:multiline true :multiline true
:style (when platform/android? :height 95
{:flex 1}) :error account-error
:height 95 :accessibility-label :add-account-enter-seed
:error account-error :on-change-text
:accessibility-label :add-account-enter-seed #(do
:on-change-text (re-frame/dispatch [:set-in [:add-account :account-error] nil])
#(do (re-frame/dispatch [:set-in [:add-account :seed] (security/mask-data (string/lower-case %))]))}]])
(re-frame/dispatch [:set-in [:add-account :account-error] nil])
(re-frame/dispatch [:set-in [:add-account :seed] (security/mask-data (string/lower-case %))]))}])
(when (= type :key) (when (= type :key)
[text-input/text-input-with-label [react/view {:margin-top 30}
{:parent-container {:margin-top 30} [quo/text-input
:label (i18n/label :t/private-key) {:label (i18n/label :t/private-key)
:auto-focus false :auto-focus false
:placeholder (i18n/label :t/enter-a-private-key) :placeholder (i18n/label :t/enter-a-private-key)
:auto-correct false :auto-correct false
:keyboard-type "visible-password" :keyboard-type "visible-password"
:error account-error :error account-error
:secure-text-entry true :secure-text-entry true
:accessibility-label :add-account-enter-private-key :accessibility-label :add-account-enter-private-key
:text-content-type :none :text-content-type :none
:on-change-text :on-change-text
#(do #(do
(re-frame/dispatch [:set-in [:add-account :account-error] nil]) (re-frame/dispatch [:set-in [:add-account :account-error] nil])
(re-frame/dispatch [:set-in [:add-account :private-key] (security/mask-data %)]))}])]) (re-frame/dispatch [:set-in [:add-account :private-key] (security/mask-data %)]))}]])])
(defview pin [] (defview pin []
(letsubs [pin [:hardwallet/pin] (letsubs [pin [:hardwallet/pin]

7
src/status_im/ui/screens/wallet/components/views.cljs
View File

@ -6,7 +6,7 @@
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as topbar] [status-im.ui.components.toolbar.view :as topbar]
[status-im.ui.screens.wallet.components.styles :as styles] [status-im.ui.screens.wallet.components.styles :as styles]
[status-im.ui.components.text-input.view :as text-input] [quo.core :as quo]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.utils.debounce :as debounce]) [status-im.utils.debounce :as debounce])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
@ -37,10 +37,9 @@
[react/view {:padding-horizontal 16 [react/view {:padding-horizontal 16
:padding-vertical 24 :padding-vertical 24
:flex 1} :flex 1}
[text-input/text-input-with-label [quo/text-input
{:multiline true {:multiline true
:container {:height 98 :height 98
:padding-vertical 8}
:placeholder (i18n/label :t/recipient-code-placeholder) :placeholder (i18n/label :t/recipient-code-placeholder)
:text-align-vertical :top :text-align-vertical :top
:on-change-text #(reset! content %) :on-change-text #(reset! content %)

174
src/status_im/ui/screens/wallet/custom_tokens/views.cljs
View File

@ -3,10 +3,10 @@
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.components.common.common :as components.common] [status-im.ui.components.common.common :as components.common]
[clojure.string :as string] [clojure.string :as string]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[quo.core :as quo]
[status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.topbar :as topbar])) [status-im.ui.components.topbar :as topbar]))
@ -25,58 +25,66 @@
[:wallet/custom-token-screen]] [:wallet/custom-token-screen]]
[react/keyboard-avoiding-view {:flex 1 :background-color colors/white} [react/keyboard-avoiding-view {:flex 1 :background-color colors/white}
[topbar/topbar {:title :t/add-custom-token}] [topbar/topbar {:title :t/add-custom-token}]
[react/scroll-view {:keyboard-should-persist-taps :handled :style {:flex 1 :margin-top 8 :padding-horizontal 16}} [react/scroll-view {:keyboard-should-persist-taps :handled
[react/view {:style {:flex-direction :row :justify-content :space-between :padding-vertical 10}} :style {:flex 1
[react/text (i18n/label :t/contract-address)] :padding-horizontal 16}}
(when in-progress? [react/view {:padding-vertical 8}
[react/view {:flex-direction :row :justify-content :center} [react/view {:style {:flex-direction :row
[react/view {:height 20} :justify-content :space-between
[react/activity-indicator {:width 24 :height 24 :animating true}]] :padding-vertical 10}}
[react/text {:style {:color colors/gray :margin-left 5}} [react/text (i18n/label :t/contract-address)]
(i18n/label :t/processing)]])] (when in-progress?
(when-not in-progress? [react/view {:flex-direction :row :justify-content :center}
;;tooltip covers button [react/view {:height 20}
[react/view {:position :absolute :z-index 1000 :right 0 :top 10} [react/activity-indicator {:width 24 :height 24 :animating true}]]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:wallet.custom-token.ui/contract-address-paste])} [react/text {:style {:color colors/gray :margin-left 5}}
[react/text {:style {:color colors/blue}} (i18n/label :t/processing)]])]
(i18n/label :t/paste)]]]) (when-not in-progress?
[text-input/text-input-with-label ;;tooltip covers button
{:on-change-text #(debounce-and-save :contract %) [react/view {:position :absolute :z-index 1000 :right 0 :top 10}
:error error [react/touchable-highlight {:on-press #(re-frame/dispatch [:wallet.custom-token.ui/contract-address-paste])}
:default-value contract [react/text {:style {:color colors/blue}}
:multiline true (i18n/label :t/paste)]]])
:height 78 [quo/text-input
:auto-focus false {:on-change-text #(debounce-and-save :contract %)
:placeholder (i18n/label :t/specify-address)}] :error error
[react/view {:height 16}] :default-value contract
[text-input/text-input-with-label :multiline true
{:on-change-text #(debounce-and-save :name %) :height 78
:label (i18n/label :t/name) :auto-focus false
:default-value name :placeholder (i18n/label :t/specify-address)}]]
:error error-name [react/view {:padding-vertical 8}
:auto-focus false [quo/text-input
:placeholder (i18n/label :t/name-of-token)}] {:on-change-text #(debounce-and-save :name %)
[react/view {:height 16}] :label (i18n/label :t/name)
[react/view {:style {:flex-direction :row}} :default-value name
[react/view {:flex 1} :error error-name
[text-input/text-input-with-label :auto-focus false
{:on-change-text #(debounce-and-save :symbol %) :placeholder (i18n/label :t/name-of-token)}]]
:label (i18n/label :t/symbol) [react/view {:padding-vertical 8}
:error error-symbol [react/view {:style {:flex-direction :row}}
:default-value symbol [react/view {:flex 1
:auto-focus false :padding-right 8}
:placeholder "ABC"}]] [quo/text-input
[react/view {:flex 1 :margin-left 33} {:on-change-text #(debounce-and-save :symbol %)
[text-input/text-input-with-label :label (i18n/label :t/symbol)
{:label (i18n/label :t/decimals) :error error-symbol
:on-change-text #(debounce-and-save :decimals %) :default-value symbol
:default-value decimals :auto-focus false
:keyboard-type :number-pad :show-cancel false
:max-length 2 :placeholder "ABC"}]]
:auto-focus false [react/view {:flex 1
:placeholder "18"}]]] :padding-left 8}
[react/view {:height 16}] [quo/text-input
#_[text-input/text-input-with-label {:label (i18n/label :t/decimals)
:on-change-text #(debounce-and-save :decimals %)
:default-value decimals
:keyboard-type :number-pad
:max-length 2
:auto-focus false
:show-cancel false
:placeholder "18"}]]]]
#_[quo/text-input
{:label (i18n/label :t/balance) {:label (i18n/label :t/balance)
:default-value (when (and balance decimals) :default-value (when (and balance decimals)
(wallet.utils/format-amount balance decimals)) (wallet.utils/format-amount balance decimals))
@ -105,35 +113,39 @@
[react/keyboard-avoiding-view {:flex 1 :background-color colors/white} [react/keyboard-avoiding-view {:flex 1 :background-color colors/white}
[topbar/topbar {:title name}] [topbar/topbar {:title name}]
[react/scroll-view {:keyboard-should-persist-taps :handled [react/scroll-view {:keyboard-should-persist-taps :handled
:style {:flex 1 :margin-top 8}} :style {:flex 1}}
[react/view {:padding-horizontal 16} [react/view {:padding-horizontal 16}
[text-input/text-input-with-label [react/view {:padding-vertical 8}
{:label (i18n/label :t/contract-address) [quo/text-input
:default-value address {:label (i18n/label :t/contract-address)
:multiline true :default-value address
:height 78 :multiline true
:editable false}] :height 78
[react/view {:height 16}] :editable false}]]
[text-input/text-input-with-label [react/view {:padding-vertical 8}
{:label (i18n/label :t/name) [quo/text-input
:default-value name {:label (i18n/label :t/name)
:editable false}] :default-value name
[react/view {:height 16}] :editable false}]]
[react/view {:style {:flex-direction :row}} [react/view {:padding-vertical 8}
[react/view {:flex 1} [react/view {:style {:flex-direction :row}}
[text-input/text-input-with-label [react/view {:flex 1
{:label (i18n/label :t/symbol) :padding-right 8}
:editable false [quo/text-input
:default-value symbol}]] {:label (i18n/label :t/symbol)
[react/view {:flex 1 :margin-left 33} :editable false
[text-input/text-input-with-label :show-cancel false
{:label (i18n/label :t/decimals) :default-value symbol}]]
:default-value (str decimals) [react/view {:flex 1 :padding-left 8}
:editable false}]]]] [quo/text-input
{:label (i18n/label :t/decimals)
:show-cancel false
:default-value (str decimals)
:editable false}]]]]]
[react/view {:height 24}] [react/view {:height 24}]
(when custom? (when custom?
[list-item/list-item [list-item/list-item
{:theme :action-destructive {:theme :action-destructive
:title :t/remove-token :title :t/remove-token
:icon :main-icons/delete :icon :main-icons/delete
:on-press #(re-frame/dispatch [:wallet.custom-token.ui/remove-pressed token true])}])]])) :on-press #(re-frame/dispatch [:wallet.custom-token.ui/remove-pressed token true])}])]]))

44
src/status_im/ui/screens/wallet/settings/views.cljs
View File

@ -74,7 +74,7 @@
[render-token token]) [render-token token])
(defview manage-assets [] (defview manage-assets []
(letsubs [{search-filter :search-filter (letsubs [{search-filter :search-filter
{custom-tokens true default-tokens nil} :tokens} [:wallet/filtered-grouped-chain-tokens]] {custom-tokens true default-tokens nil} :tokens} [:wallet/filtered-grouped-chain-tokens]]
{:component-will-unmount #(do {:component-will-unmount #(do
(re-frame/dispatch [:search/token-filter-changed nil]) (re-frame/dispatch [:search/token-filter-changed nil])
@ -82,33 +82,35 @@
[react/view (merge components.styles/flex {:background-color colors/white}) [react/view (merge components.styles/flex {:background-color colors/white})
[toolbar] [toolbar]
[react/view {:style components.styles/flex} [react/view {:style components.styles/flex}
[search-input/search-input [react/view {:padding-horizontal 16
{:search-active? search-active? :padding-vertical 10}
:search-filter search-filter [search-input/search-input
:on-cancel #(re-frame/dispatch [:search/token-filter-changed nil]) {:search-active? search-active?
:on-focus (fn [search-filter] :search-filter search-filter
(when-not search-filter :on-cancel #(re-frame/dispatch [:search/token-filter-changed nil])
(re-frame/dispatch [:search/token-filter-changed ""]))) :on-focus (fn [search-filter]
:on-change (fn [text] (when-not search-filter
(re-frame/dispatch [:search/token-filter-changed text]))}] (re-frame/dispatch [:search/token-filter-changed ""])))
:on-change (fn [text]
(re-frame/dispatch [:search/token-filter-changed text]))}]]
[list/section-list [list/section-list
{:header {:header
[react/view {:margin-top 16} [react/view {:margin-top 16}
[list-item/list-item [list-item/list-item
{:theme :action {:theme :action
:title :t/add-custom-token :title :t/add-custom-token
:icon :main-icons/add :icon :main-icons/add
:on-press :on-press
#(re-frame/dispatch [:navigate-to :wallet-add-custom-token])}]] #(re-frame/dispatch [:navigate-to :wallet-add-custom-token])}]]
:sections (concat :sections (concat
(when (seq custom-tokens) (when (seq custom-tokens)
[{:title (i18n/label :t/custom) [{:title (i18n/label :t/custom)
:data custom-tokens}]) :data custom-tokens}])
[{:title (i18n/label :t/default) [{:title (i18n/label :t/default)
:data default-tokens}]) :data default-tokens}])
:key-fn :address :key-fn :address
:stickySectionHeadersEnabled false :stickySectionHeadersEnabled false
:render-section-header-fn :render-section-header-fn
(fn [{:keys [title]}] (fn [{:keys [title]}]
[list-item/list-item {:type :section-header :title title}]) [list-item/list-item {:type :section-header :title title}])
:render-fn render-token-wrapper}]]])) :render-fn render-token-wrapper}]]]))

2
translations/en.json
View File

@ -414,6 +414,7 @@
"enter-address": "Enter address", "enter-address": "Enter address",
"enter-contact-code": "Enter ENS username or chat key", "enter-contact-code": "Enter ENS username or chat key",
"enter-pair-code": "Enter your pairing code", "enter-pair-code": "Enter your pairing code",
"pair-code-placeholder": "Pair code...",
"enter-pair-code-description": "Pairing code was displayed to you during the Keycard setup", "enter-pair-code-description": "Pairing code was displayed to you during the Keycard setup",
"enter-password": "Enter password", "enter-password": "Enter password",
"enter-pin": "Enter 6-digit passcode", "enter-pin": "Enter 6-digit passcode",
@ -1081,6 +1082,7 @@
"welcome-to-status": "Welcome to Status!", "welcome-to-status": "Welcome to Status!",
"welcome-to-status-description": "Set up your crypto wallet, invite friends to chat and browse decentralized apps", "welcome-to-status-description": "Set up your crypto wallet, invite friends to chat and browse decentralized apps",
"welcome-blank-message": "Your chats will appear here. To start new chats press the ⊕ button", "welcome-blank-message": "Your chats will appear here. To start new chats press the ⊕ button",
"seed-phrase-placeholder": "Seed phrase...",
"word-count": "Word count", "word-count": "Word count",
"word-n": "Word #{{number}}", "word-n": "Word #{{number}}",
"word-n-description": "In order to check if you have backed up your seed phrase correctly, enter the word #{{number}} above.", "word-n-description": "In order to check if you have backed up your seed phrase correctly, enter the word #{{number}} above.",