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

Revert "Replace all text-inputs with quo component" 

This reverts commit 379384211f.

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
This commit is contained in:
Gheorghe Pinzaru 2020-06-10 17:56:42 +03:00
parent 379384211f
commit db202f03bf
No known key found for this signature in database
GPG Key ID: C9A094959935A952
43 changed files with 832 additions and 579 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 identity :Easing #js {:bezier nil
:linear identity} :linear nil}
: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,5 +203,6 @@
"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,18 +5,15 @@
[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 monospace color style]}] (defn text-style [{:keys [size align weight 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 (if monospace (merge (case (or weight :regular)
;; TODO(Ferossgp): Add all weights for monospace :regular typography/font-regular
typography/monospace :medium typography/font-medium
(case (or weight :regular) :semi-bold typography/font-semi-bold
:regular typography/font-regular :bold typography/font-bold
:medium typography/font-medium :monospace typography/monospace
:semi-bold typography/font-semi-bold :inherit nil)
: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,36 +5,30 @@
[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 (s/or :string string? :component vector?))) (s/def ::label (s/nilable string?))
(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/nilable (s/or :string string? :keyword keyword?))) ; TODO: make set (s/def ::keyboard-type #{})
(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 :opt-un [::on-press (s/def ::accessory (s/keys :req-un [::icon]
::icon :opt-un [::on-press]))
::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))
@ -66,13 +60,15 @@
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)})
@ -88,10 +84,8 @@
:background-color (:ui-01 @colors/theme)} :background-color (:ui-01 @colors/theme)}
style)) style))
(defn text-input-style [multiline input-style monospace before after] (defn text-input-style [multiline input-style before after]
(merge (if monospace (merge typography/font-regular
typography/monospace
typography/font-regular)
{:padding-top 11 {:padding-top 11
:padding-bottom 11 :padding-bottom 11
:font-size 15 :font-size 15
@ -121,7 +115,7 @@
{:flex 1 {:flex 1
:justify-content :center})) :justify-content :center}))
(defn accessory-element [{:keys [icon component icon-opts style accessibility-label on-press]}] (defn accessory-element [{:keys [icon 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)]
@ -132,29 +126,21 @@
style)} style)}
(when accessibility-label (when accessibility-label
{:accessibility-label accessibility-label})) {:accessibility-label accessibility-label}))
(cond [icons/icon icon (merge {:color (:icon-01 @colors/theme)}
icon icon-opts)]]]))
[icons/icon icon (merge {:color (:icon-01 @colors/theme)}
icon-opts)]
component
component
:else (defn text-input []
nil)]])) (let [focused (reagent/atom nil)
visible (reagent/atom false)
(defn text-input-raw [] ref (react/create-ref)
(let [focused (reagent/atom nil) on-cancel (fn []
visible (reagent/atom false) (some-> (react/current-ref ref) (ocall "blur")))]
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 get-ref on-cancel bottom-value secure-text-entry container-style]
monospace] :or {cancel-label "Cancel"
:or {cancel-label "Cancel" show-cancel true}
show-cancel true} :as props}]
: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)
@ -166,11 +152,7 @@
: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)}
@ -180,23 +162,19 @@
(when before (when before
[accessory-element before]) [accessory-element before])
[rn/text-input [rn/text-input
(merge {:style (text-input-style multiline input-style monospace before after) (merge {:style (text-input-style multiline input-style before after)
:ref (fn [r] :ref ref
(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))
(when (and platform/ios? show-cancel) (rn/configure-next (:ease-in-ease-out rn/layout-animation-presets))
(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))
(when (and platform/ios? show-cancel) (rn/configure-next (:ease-in-ease-out rn/layout-animation-presets))
(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})
@ -205,7 +183,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 :get-ref))] :secure-text-entry :ref))]
(when after (when after
[accessory-element after])] [accessory-element after])]
(when (and platform/ios? (when (and platform/ios?
@ -214,36 +192,13 @@
@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
:align :center :size :small}
:size :small} error]])]))))
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,7 +5,6 @@
[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)
@ -49,8 +48,7 @@
:height height})))] :height height})))]
(fn [{:keys [bottom-value]} & children] (fn [{:keys [bottom-value]} & children]
[:<> [:<>
[animated/code {:exec (animated/cond* (animated/not* animation-v) [animated/code {:exec (animated/set animation-v 1)}]
(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})
@ -60,10 +58,7 @@
(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
(when platform/ios? :height 8
;; NOTE(Ferossgp): Android does not show elevation for tooltip making it lost on white bg :container-style {:elevation 3}
[vector-icons/icon :icons/tooltip-tip {:width 18 :color (:ui-background @colors/theme)}]]]])))
:height 8
:container-style {:elevation 3}
:color (:ui-background @colors/theme)}])]]])))

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

@ -6,6 +6,13 @@
: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]
[quo.core :as quo] [status-im.ui.components.text-input.view :as text-input]
[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
[react/view {:padding-vertical 8} [text-input/text-input-with-label
[quo/text-input {:label (i18n/label :t/name)
{:label (i18n/label :t/name) :placeholder (i18n/label :t/specify-name)
:placeholder (i18n/label :t/specify-name) :container styles/input-container
: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}]
[react/view {:padding-vertical 8} [text-input/text-input-with-label
[quo/text-input {:label (i18n/label :t/rpc-url)
{:label (i18n/label :t/rpc-url) :placeholder (i18n/label :t/specify-rpc-url)
:placeholder (i18n/label :t/specify-rpc-url) :container styles/input-container
: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/view {:padding-vertical 8} [react/i18n-text {:key :network-chain}]
[react/i18n-text {:key :network-chain}] [react/view styles/network-type
[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?
[react/view {:padding-vertical 8} [text-input/text-input-with-label
[quo/text-input {:label (i18n/label :t/network-id)
{:label (i18n/label :t/network-id) :container styles/input-container
: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 Normal file
View File

@ -0,0 +1,27 @@
(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,34 +1,46 @@
(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]
[quo.core :as quo] [status-im.ui.components.colors :as colors]
[quo.design-system.colors :as colors])) [status-im.ui.components.icons.vector-icons :as icons]
[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-focus on-change on-cancel search-filter auto-focus]}] (fn [{:keys [on-cancel on-focus on-change
[quo/text-input {:placeholder (i18n/label :t/search) search-container-style search-filter auto-focus]}]
:blur-on-submit true [react/view {:style (or search-container-style (styles/search-container))}
:multiline false [react/view {:style (styles/search-input-container)}
:ref #(reset! input-ref %) [icons/icon :main-icons/search {:color colors/gray
:default-value search-filter :container-style {:margin-left 6
:auto-focus auto-focus :margin-right 2}}]
:on-cancel on-cancel [react/text-input {:placeholder (i18n/label :t/search)
:auto-correct false :blur-on-submit true
:auto-capitalize :none :multiline false
:input-style {:height 36} :ref #(reset! input-ref %)
:before {:icon :main-icons/search :style styles/search-input
:style {:padding-horizontal 8} :default-value search-filter
:on-press #(.focus ^js @input-ref) :auto-focus auto-focus
:icon-opts {:color (:icon-02 @colors/theme)}} :auto-correct false
:on-focus #(do :auto-capitalize :none
(when on-focus :on-focus #(do
(on-focus search-filter)) (when on-focus
(reset! search-active? true)) (on-focus search-filter))
:on-blur #(reset! search-active? false) (reset! search-active? true))
: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 Normal file
View File

@ -0,0 +1,39 @@
(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 Normal file
View File

@ -0,0 +1,49 @@
(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,11 +26,13 @@
(defn- icon-wrapper [color icon] (defn- icon-wrapper [color icon]
[react/view [react/view
{:style {:width 32 {:style {:margin-right 16
:height 32 :margin-top 11
:border-radius 25 :width 32
:align-items :center :height 32
:justify-content :center :border-radius 25
:align-items :center
:justify-content :center
:background-color color}} :background-color color}}
icon]) icon])
@ -66,14 +68,12 @@
: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 {:flex-direction :row [react/view add-new.styles/new-chat-container
:padding 16} [react/view (add-new.styles/new-chat-input-container)
[react/view {:flex 1 [react/text-input
: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,13 +82,16 @@
#(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)
:show-cancel false :style add-new.styles/input
;; 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 {:justify-content :center [react/view {:width 16}]
:align-items :center} [input-icon state]]
[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)

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

@ -1,9 +1,28 @@
(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,37 +5,39 @@
[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]
[quo.core :as quo] [status-im.ui.components.styles :as common.styles]
[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]
[quo/text-input [react/view
{:on-change-text #(re-frame/dispatch [:set :public-group-topic %]) [react/view (add-new.styles/input-container)
:on-submit-editing #(when (db/valid-topic? topic) (start-chat topic)) [react/text {:style styles/topic-hash} "#"]
:auto-capitalize :none [react/view common.styles/flex
:auto-focus false [text-input.view/text-input-with-label
:accessibility-label :chat-name-input {:container styles/input-container
:before {:component [hash-icon]} :on-change-text #(re-frame/dispatch [:set :public-group-topic %])
;; Set default-value as otherwise it will :on-submit-editing #(when (db/valid-topic? topic) (start-chat topic))
;; be erased in global `onWillBlur` handler :auto-capitalize :none
:default-value topic :auto-focus false
:placeholder "chat-name" :accessibility-label :chat-name-input
:return-key-type :go ;; Set default-value as otherwise it will
:auto-correct false ;; be erased in global `onWillBlur` handler
:error error}]) :default-value topic
: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}

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

@ -1,6 +1,12 @@
(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
@ -8,3 +14,17 @@
: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,6 +3,21 @@
[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,14 +2,18 @@
(: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]
[quo.core :as quo] [status-im.ui.components.text-input.view :as text-input]
[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]
@ -20,6 +24,14 @@
[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]]
@ -33,33 +45,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
[react/view {:padding-vertical 8} [text-input/text-input-with-label
[quo/text-input {:label (i18n/label :t/name)
{:label (i18n/label :t/name) :placeholder (i18n/label :t/specify-name)
:placeholder (i18n/label :t/specify-name) :accessibility-label :bootnode-name
:accessibility-label :bootnode-name :style styles/input
:default-value name :container styles/input-container
:on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :name %]) :default-value name
:auto-focus true}]] :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :name %])
:auto-focus true}]
[react/view [react/view
{:flex 1 {:flex 1}
:padding-vertical 8} [text-input/text-input-with-label
[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
:show-cancel false :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %])}
:on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %]) (when-not platform/desktop? {:content qr-code}))]
:error (when (and (not (string/blank? url)) invalid-url?) (when (and (not (string/blank? url)) invalid-url?)
(i18n/label :t/invalid-format [tooltip/tooltip (i18n/label :t/invalid-format
{:format (i18n/label :t/bootnode-format)})) {:format (i18n/label :t/bootnode-format)})
:bottom-value 0 {:color colors/red-light
:after {:icon :main-icons/qr :font-size 12
:on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed :bottom-value 25}])]
{: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,6 +115,9 @@
{: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,20 +32,18 @@
[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}
[react/view {:padding-horizontal 16 [search-input/search-input
:padding-vertical 10} {:search-active? search-active?
[search-input/search-input :search-filter search-filter
{:search-active? search-active? :on-cancel #(re-frame/dispatch [:search/currency-filter-changed nil])
:search-filter search-filter :on-focus (fn [search-filter]
:on-cancel #(re-frame/dispatch [:search/currency-filter-changed nil]) (when-not search-filter
:on-focus (fn [search-filter] (re-frame/dispatch [:search/currency-filter-changed ""])))
(when-not search-filter :on-change (fn [text]
(re-frame/dispatch [:search/currency-filter-changed ""]))) (re-frame/dispatch [:search/currency-filter-changed text]))}]
:on-change (fn [text] [list/flat-list {:data (->> currencies
(re-frame/dispatch [:search/currency-filter-changed text]))}]] vals
[list/flat-list {:data (->> currencies (sort #(compare (:code %1) (:code %2))))
vals :key-fn :code
(sort #(compare (:code %1) (:code %2)))) :render-fn (render-currency currency-id)
: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,9 +24,7 @@
(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,14 +125,16 @@
: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}}
[quo/text-input [react/view (add-new.styles/input-container)
{:auto-focus true [react/text-input
:on-change-text #(re-frame/dispatch [:set :new-chat-name %]) {:auto-focus true
:default-value group-name :on-change-text #(re-frame/dispatch [:set :new-chat-name %])
:placeholder (i18n/label :t/set-a-topic) :default-value group-name
:accessibility-label :chat-name-input}] :placeholder (i18n/label :t/set-a-topic)
: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
@ -240,16 +242,18 @@
[topbar/topbar [topbar/topbar
{:title :t/edit-group {:title :t/edit-group
:modal? true}] :modal? true}]
[react/scroll-view {:style {:padding 16 [react/view {:style {:padding 16
:flex 1}} :flex 1}}
[quo/text-input [react/view {:style (add-new.styles/input-container)}
{:on-change-text #(reset! new-group-chat-name %) [react/text-input
:default-value name {:on-change-text #(reset! new-group-chat-name %)
:on-submit-editing #(when (seq @new-group-chat-name) :default-value name
(re-frame/dispatch [:group-chats.ui/name-changed chat-id @new-group-chat-name])) :on-submit-editing #(when (seq @new-group-chat-name)
:placeholder (i18n/label :t/enter-contact-code) (re-frame/dispatch [:group-chats.ui/name-changed chat-id @new-group-chat-name]))
:accessibility-label :new-chat-name :placeholder (i18n/label :t/enter-contact-code)
:return-key-type :go}]] :style add-new.styles/input
: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,6 +57,10 @@
: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
@ -77,6 +81,9 @@
: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,17 +86,15 @@
(defonce search-active? (reagent/atom false)) (defonce search-active? (reagent/atom false))
(defn search-input-wrapper [search-filter] (defn search-input-wrapper [search-filter]
[react/view {:padding-horizontal 16 [search-input/search-input
:padding-vertical 10} {:search-active? search-active?
[search-input/search-input :search-filter search-filter
{:search-active? search-active? :on-cancel #(re-frame/dispatch [:search/home-filter-changed nil])
:search-filter search-filter :on-focus (fn [search-filter]
:on-cancel #(re-frame/dispatch [:search/home-filter-changed nil]) (when-not search-filter
:on-focus (fn [search-filter] (re-frame/dispatch [:search/home-filter-changed ""])))
(when-not search-filter :on-change (fn [text]
(re-frame/dispatch [:search/home-filter-changed ""]))) (re-frame/dispatch [:search/home-filter-changed text]))}])
: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,6 +11,7 @@
[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]
@ -18,7 +19,6 @@
[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,23 +230,24 @@
: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? _] (defn password-container [confirm-failure? view-width]
(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
:margin-horizontal horizontal-margin}} :align-items :center :margin-horizontal horizontal-margin}}
[react/view [react/view {:style {:justify-content :center :flex 1}}
[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}
[quo/text-input {:secure-text-entry true [react/text-input {:secure-text-entry true
:auto-capitalize :none :auto-capitalize :none
:auto-focus true :auto-focus true
:show-cancel false :accessibility-label :password-input
:accessibility-label :password-input :text-align :center
:placeholder "" :placeholder ""
:on-change-text #(re-frame/dispatch [:intro-wizard/code-symbol-pressed %])}]] :style (styles/password-text-input (- view-width (* 2 horizontal-margin)))
: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]}]
@ -361,45 +362,69 @@
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}
[react/view {:background-color colors/white [text-input/text-input-with-label
:flex 1 {:on-change-text #(re-frame/dispatch [:multiaccounts.recover/enter-phrase-input-changed (security/mask-data %)])
:justify-content :center :auto-focus true
:padding-horizontal 16} :error (when passphrase-error (i18n/label passphrase-error))
[quo/text-input :accessibility-label :passphrase-input
{:on-change-text #(re-frame/dispatch [:multiaccounts.recover/enter-phrase-input-changed (security/mask-data %)]) :placeholder nil
:auto-focus true :bottom-value 40
:error (when passphrase-error (i18n/label passphrase-error)) :multiline true
:accessibility-label :passphrase-input :auto-correct false
:placeholder (i18n/label :t/seed-phrase-placeholder) :keyboard-type "visible-password"
:show-cancel false :parent-container {:flex 1
:bottom-value 40 :justify-content :center}
:multiline true :container (merge {:background-color colors/white
:auto-correct false :flex 1
:monospace true}] :justify-content :center
[react/view {:align-items :flex-end} :min-height 90}
[react/view {:flex-direction :row (when platform/ios?
:align-items :center {:max-height 150}))
:padding-vertical 8 :style {:background-color colors/white
:opacity (if passphrase-word-count 1 0)} :text-align :center
[quo/text {:color (if next-button-disabled? :secondary :main) :text-align-vertical :center
:size :small} :min-width 40
(when-not next-button-disabled? :font-size 16
"✓ ") :font-weight "700"}}]
(i18n/label-pluralize passphrase-word-count :t/words-n)]]]]
[react/view {:align-items :center} [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?
[react/view {:style {:background-color colors/green-transparent-10
:border-radius 12
:width 24
: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,17 +348,20 @@
: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 {:flex 1 [react/view
:padding 16 [text-input/text-input-with-label
: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 (i18n/label :t/word-n {:number (inc idx)}) :placeholder nil
:auto-correct false :auto-correct false
:keyboard-type "visible-password"
:accessibility-label :enter-word :accessibility-label :enter-word
:monospace true}] :container {:background-color colors/white}
: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]]]
@ -377,5 +380,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,6 +7,7 @@
[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]
@ -15,7 +16,6 @@
[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,15 +147,16 @@
: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
[react/view {:flex 1 [text-input/text-input-with-label
:padding 16 {:on-change-text #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-changed %])
:justify-content :center} :auto-focus true
[quo/text-input :on-submit-editing #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-submitted])
{:on-change-text #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-changed %]) :placeholder nil
:auto-focus true :text-align :center
:on-submit-editing #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-submitted]) :container {:background-color colors/white}
:placeholder (i18n/label :t/pair-code-placeholder) :style {:background-color colors/white
:monospace true}]] :height 24
: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,12 +53,11 @@
: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}
[quo/text-input [text-input/text-input-with-label
{:placeholder (i18n/label :t/enter-your-password) {:placeholder (i18n/label :t/enter-your-password)
:get-ref #(reset! password-text-input %) :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,5 +1,6 @@
(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.colors :as colors] (:require [status-im.ui.components.styles :as components.styles]
[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
@ -7,6 +8,14 @@
: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,9 +8,10 @@
[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]
@ -53,26 +54,29 @@
[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
[react/view {:padding-vertical 8} [text-input/text-input-with-label
[quo/text-input {:label (i18n/label :t/name)
{:label (i18n/label :t/name) :placeholder (i18n/label :t/specify-name)
:placeholder (i18n/label :t/specify-name) :container styles/input-container
: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 {:flex 1 [react/view
:padding-vertical 8} {:flex 1}
[quo/text-input [text-input/text-input-with-label
{: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 %])}]
:bottom-value 0 (when (and (not (string/blank? url))
:error (when (and (not (string/blank? url)) invalid-url?)
invalid-url?) [tooltip/tooltip (i18n/label :t/invalid-format
(i18n/label :t/invalid-format {:format (i18n/label :t/mailserver-format)})
{:format (i18n/label :t/mailserver-format)}))}]] {:color colors/red-light
:font-size 12
:bottom-value 25}])]
(when (and id (when (and id
(not connected?)) (not connected?))
[react/view [react/view

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

@ -1,5 +1,6 @@
(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,3 +77,15 @@
{: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]
[quo.core :as quo] [status-im.ui.components.text-input.view :as text-input]
[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,13 +138,15 @@
[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
[quo/text-input [react/text (i18n/label :t/pairing-please-set-a-name)]]
{:placeholder (i18n/label :t/specify-name) [text-input/text-input-with-label
:label (i18n/label :t/pairing-please-set-a-name) {:placeholder (i18n/label :t/specify-name)
:accessibility-label :device-name :style styles/input
:default-value @installation-name :accessibility-label :device-name
:on-change-text #(reset! installation-name %) :container styles/input-container
:auto-focus true}]]] :default-value @installation-name
: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,6 +3,38 @@
;; 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,6 +71,17 @@
{: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,15 +77,10 @@
{: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 idx] (defview input [error next-handler]
(letsubs [ref (reagent/atom nil)] (letsubs [ref (reagent/atom nil)]
[quo/text-input [text-input/text-input-with-label
{: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
@ -111,8 +106,12 @@
(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 {:padding-bottom 8} [react/view {:style styles/enter-word-row}
[input error (next-handler word entered-word step) idx]] [react/text {:style styles/enter-word-label}
(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,8 +10,6 @@
[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))
@ -59,8 +57,6 @@
(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]))

19
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]
[quo.core :as quo] [status-im.ui.components.text-input.view :as text-input]
[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,11 +12,9 @@
[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 [react/view {:style {:flex-direction :row :margin-top 8}}
:margin-top 8
:align-items :flex-end}}
[react/view {:flex 1} [react/view {:flex 1}
[quo/text-input [text-input/text-input-with-label
{: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)
@ -24,11 +22,9 @@
: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 [react/view {:flex 1 :margin-left 33}
:padding-left 16} [text-input/text-input-with-label
[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)
@ -36,12 +32,9 @@
: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 {:padding-left 8 [react/view {:margin-top 58 :margin-left 10}
: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}]

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

@ -58,3 +58,22 @@
: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]
[quo.core :as quo] [status-im.ui.components.text-input.view :as text-input]
[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,17 +258,15 @@
: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]
[react/view {:padding-horizontal 16 [text-input/text-input-with-label
:padding-vertical 12} {:secure-text-entry true
[quo/text-input :placeholder (i18n/label :t/enter-password)
{:secure-text-entry true :on-change-text #(re-frame/dispatch [:signing.ui/password-is-changed (security/mask-data %)])
:placeholder (i18n/label :t/enter-password) :accessibility-label :enter-password-input
:on-change-text #(re-frame/dispatch [:signing.ui/password-is-changed (security/mask-data %)]) :auto-capitalize :none
:accessibility-label :enter-password-input :editable (not in-progress?)
:auto-capitalize :none :error error
:editable (not in-progress?) :container {:margin-top 12 :margin-bottom 12 :margin-horizontal 16}}]
: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,6 +1,7 @@
(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]
@ -8,7 +9,6 @@
[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,13 +57,14 @@
: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}
[quo/text-input [text-input/text-input-with-label
{: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 16 :color colors/gray}} (i18n/label :t/account-color)] [react/text {:style {:margin-top 30 :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,12 +11,13 @@
[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]
[quo.core :as quo] [status-im.utils.platform :as platform]
[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 []
@ -47,8 +48,8 @@
:handler #(request-camera-permissions)}]}))])) :handler #(request-camera-permissions)}]}))]))
(defn common-settings [account] (defn common-settings [account]
[react/view {:margin-horizontal 16} [react/view {:margin-horizontal 16 :margin-top 30}
[quo/text-input [text-input/text-input-with-label
{: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)
@ -64,25 +65,24 @@
(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 {:padding-horizontal 16 [react/view {:margin-horizontal 16}
:padding-vertical 16}
(if (= type :watch) (if (= type :watch)
[quo/text-input [text-input/text-input-with-label
{: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] %])}]
[quo/text-input [text-input/text-input-with-label
{:label (i18n/label :t/password) {:label (i18n/label :t/password)
:show-cancel false :parent-container {:margin-top 30}
: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,37 +93,39 @@
(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)
[react/view {:padding-top 16} [text-input/text-input-with-label
[quo/text-input {:parent-container {:margin-top 30}
{: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
:height 95 :style (when platform/android?
:error account-error {:flex 1})
:accessibility-label :add-account-enter-seed :height 95
:on-change-text :error account-error
#(do :accessibility-label :add-account-enter-seed
(re-frame/dispatch [:set-in [:add-account :account-error] nil]) :on-change-text
(re-frame/dispatch [:set-in [:add-account :seed] (security/mask-data (string/lower-case %))]))}]]) #(do
(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)
[react/view {:margin-top 30} [text-input/text-input-with-label
[quo/text-input {:parent-container {:margin-top 30}
{: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]
[quo.core :as quo] [status-im.ui.components.text-input.view :as text-input]
[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,9 +37,10 @@
[react/view {:padding-horizontal 16 [react/view {:padding-horizontal 16
:padding-vertical 24 :padding-vertical 24
:flex 1} :flex 1}
[quo/text-input [text-input/text-input-with-label
{:multiline true {:multiline true
:height 98 :container {: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,66 +25,58 @@
[: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 [react/scroll-view {:keyboard-should-persist-taps :handled :style {:flex 1 :margin-top 8 :padding-horizontal 16}}
:style {:flex 1 [react/view {:style {:flex-direction :row :justify-content :space-between :padding-vertical 10}}
:padding-horizontal 16}} [react/text (i18n/label :t/contract-address)]
[react/view {:padding-vertical 8} (when in-progress?
[react/view {:style {:flex-direction :row [react/view {:flex-direction :row :justify-content :center}
:justify-content :space-between [react/view {:height 20}
:padding-vertical 10}} [react/activity-indicator {:width 24 :height 24 :animating true}]]
[react/text (i18n/label :t/contract-address)] [react/text {:style {:color colors/gray :margin-left 5}}
(when in-progress? (i18n/label :t/processing)]])]
[react/view {:flex-direction :row :justify-content :center} (when-not in-progress?
[react/view {:height 20} ;;tooltip covers button
[react/activity-indicator {:width 24 :height 24 :animating true}]] [react/view {:position :absolute :z-index 1000 :right 0 :top 10}
[react/text {:style {:color colors/gray :margin-left 5}} [react/touchable-highlight {:on-press #(re-frame/dispatch [:wallet.custom-token.ui/contract-address-paste])}
(i18n/label :t/processing)]])] [react/text {:style {:color colors/blue}}
(when-not in-progress? (i18n/label :t/paste)]]])
;;tooltip covers button [text-input/text-input-with-label
[react/view {:position :absolute :z-index 1000 :right 0 :top 10} {:on-change-text #(debounce-and-save :contract %)
[react/touchable-highlight {:on-press #(re-frame/dispatch [:wallet.custom-token.ui/contract-address-paste])} :error error
[react/text {:style {:color colors/blue}} :default-value contract
(i18n/label :t/paste)]]]) :multiline true
[quo/text-input :height 78
{:on-change-text #(debounce-and-save :contract %) :auto-focus false
:error error :placeholder (i18n/label :t/specify-address)}]
:default-value contract [react/view {:height 16}]
:multiline true [text-input/text-input-with-label
:height 78 {:on-change-text #(debounce-and-save :name %)
:auto-focus false :label (i18n/label :t/name)
:placeholder (i18n/label :t/specify-address)}]] :default-value name
[react/view {:padding-vertical 8} :error error-name
[quo/text-input :auto-focus false
{:on-change-text #(debounce-and-save :name %) :placeholder (i18n/label :t/name-of-token)}]
:label (i18n/label :t/name) [react/view {:height 16}]
:default-value name [react/view {:style {:flex-direction :row}}
:error error-name [react/view {:flex 1}
:auto-focus false [text-input/text-input-with-label
:placeholder (i18n/label :t/name-of-token)}]] {:on-change-text #(debounce-and-save :symbol %)
[react/view {:padding-vertical 8} :label (i18n/label :t/symbol)
[react/view {:style {:flex-direction :row}} :error error-symbol
[react/view {:flex 1 :default-value symbol
:padding-right 8} :auto-focus false
[quo/text-input :placeholder "ABC"}]]
{:on-change-text #(debounce-and-save :symbol %) [react/view {:flex 1 :margin-left 33}
:label (i18n/label :t/symbol) [text-input/text-input-with-label
:error error-symbol {:label (i18n/label :t/decimals)
:default-value symbol :on-change-text #(debounce-and-save :decimals %)
:auto-focus false :default-value decimals
:show-cancel false :keyboard-type :number-pad
:placeholder "ABC"}]] :max-length 2
[react/view {:flex 1 :auto-focus false
:padding-left 8} :placeholder "18"}]]]
[quo/text-input [react/view {:height 16}]
{:label (i18n/label :t/decimals) #_[text-input/text-input-with-label
: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))
@ -113,39 +105,35 @@
[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}} :style {:flex 1 :margin-top 8}}
[react/view {:padding-horizontal 16} [react/view {:padding-horizontal 16}
[react/view {:padding-vertical 8} [text-input/text-input-with-label
[quo/text-input {:label (i18n/label :t/contract-address)
{:label (i18n/label :t/contract-address) :default-value address
:default-value address :multiline true
:multiline true :height 78
:height 78 :editable false}]
:editable false}]] [react/view {:height 16}]
[react/view {:padding-vertical 8} [text-input/text-input-with-label
[quo/text-input {:label (i18n/label :t/name)
{:label (i18n/label :t/name) :default-value name
:default-value name :editable false}]
:editable false}]] [react/view {:height 16}]
[react/view {:padding-vertical 8} [react/view {:style {:flex-direction :row}}
[react/view {:style {:flex-direction :row}} [react/view {:flex 1}
[react/view {:flex 1 [text-input/text-input-with-label
:padding-right 8} {:label (i18n/label :t/symbol)
[quo/text-input :editable false
{:label (i18n/label :t/symbol) :default-value symbol}]]
:editable false [react/view {:flex 1 :margin-left 33}
:show-cancel false [text-input/text-input-with-label
:default-value symbol}]] {:label (i18n/label :t/decimals)
[react/view {:flex 1 :padding-left 8} :default-value (str decimals)
[quo/text-input :editable false}]]]]
{: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,35 +82,33 @@
[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}
[react/view {:padding-horizontal 16 [search-input/search-input
:padding-vertical 10} {:search-active? search-active?
[search-input/search-input :search-filter search-filter
{:search-active? search-active? :on-cancel #(re-frame/dispatch [:search/token-filter-changed nil])
:search-filter search-filter :on-focus (fn [search-filter]
:on-cancel #(re-frame/dispatch [:search/token-filter-changed nil]) (when-not search-filter
:on-focus (fn [search-filter] (re-frame/dispatch [:search/token-filter-changed ""])))
(when-not search-filter :on-change (fn [text]
(re-frame/dispatch [:search/token-filter-changed ""]))) (re-frame/dispatch [:search/token-filter-changed text]))}]
: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,7 +414,6 @@
"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",
@ -1082,7 +1081,6 @@
"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.",