Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Screens for editing transaction settings #21838

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Screens for editing transaction settings #21838

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/quo/components/inputs/input/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@
[variant-colors]
{:color (:label variant-colors)})

(def counter-container
(def right-label-container
{:flex 1
:align-items :flex-end})

Expand Down
36 changes: 23 additions & 13 deletions src/quo/components/inputs/input/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
[react-native.core :as rn]
[react-native.platform :as platform]))

(defn- label-&-counter
[{:keys [label current-chars char-limit variant-colors theme]}]
(defn- label-line
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In designs input field has labels at top-left and top-right sides. In our component we had only characters counter in the right side, so i added a right-side label.

[{:keys [label label-right current-chars char-limit variant-colors theme]}]
[rn/view
{:accessibility-label :input-labels
:style style/texts-container}
Expand All @@ -18,17 +18,25 @@
:weight :medium
:size :paragraph-2}
label]]
(when-let [count-text (some->> char-limit
(str current-chars "/"))]
[rn/view {:style style/counter-container}
(when label-right
[rn/view {:style style/right-label-container}
[text/text
{:style (style/counter-color {:current-chars current-chars
:char-limit char-limit
:variant-colors variant-colors
:theme theme})
{:style (style/label-color variant-colors)
:weight :regular
:size :paragraph-2}
count-text]])])
label-right]])
(when char-limit
(when-let [count-text (some->> char-limit
(str current-chars "/"))]
[rn/view {:style style/right-label-container}
[text/text
{:style (style/counter-color {:current-chars current-chars
:char-limit char-limit
:variant-colors variant-colors
:theme theme})
:weight :regular
:size :paragraph-2}
count-text]]))])

(defn- left-accessory
[{:keys [variant-colors small? icon-name]}]
Expand Down Expand Up @@ -65,7 +73,7 @@
(defn- base-input
[{:keys [blur? error? right-icon left-icon disabled? small? button
label char-limit multiline? clearable? on-focus on-blur container-style input-container-style
on-change-text on-char-limit-reach weight default-value on-clear placeholder]
on-change-text on-char-limit-reach weight default-value on-clear placeholder label-right]
:as props}]
(let [theme (quo.theme/use-theme)
ref (rn/use-ref-atom nil)
Expand Down Expand Up @@ -115,10 +123,11 @@
;; https://github.com/facebook/react-native/issues/27687
modified-placeholder (if platform/android? (str "\u2009" placeholder) placeholder)]
[rn/view {:style container-style}
(when (or label char-limit)
[label-&-counter
(when (or label char-limit label-right)
[label-line
{:variant-colors variant-colors
:label label
:label-right label-right
:current-chars char-count
:char-limit char-limit
:theme theme}])
Expand Down Expand Up @@ -199,6 +208,7 @@
- :on-clear - Function executed when the clear button is pressed.
- :button - Map containing `:on-press` & `:text` keys, if provided renders a button
- :label - A string to set as label for this input.
- :label-right - Additional label aligned to the right
- :char-limit - A number to set a maximum char limit for this input.
- :on-char-limit-reach - Function executed each time char limit is reached or exceeded.
- :default-shown? - boolean to show password input initially
Expand Down
4 changes: 2 additions & 2 deletions src/quo/components/tags/network_tags/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@
:padding-bottom 2})

(defn title-style
[{:keys [status theme]}]
{:padding-left 4
[{:keys [status theme networks-shown?]}]
{:padding-left (if networks-shown? 4 0)
:margin-top -1
:color (when (= status :error)
(colors/theme-colors
Expand Down
16 changes: 9 additions & 7 deletions src/quo/components/tags/network_tags/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,16 @@
:theme theme
:blur? blur?})
container-style)}
[preview-list/view
{:type :network
:number (count networks)
:size :size-16}
networks]
(when networks
Copy link
Contributor Author

@vkjr vkjr Dec 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If networks is empty we don't need this component because it eats some space and leads to incorrect alignment of text after it.

[preview-list/view
{:type :network
:number (count networks)
:size :size-16}
networks])
[text/text
{:weight :medium
:size :paragraph-2
:style (style/title-style {:status status
:theme theme})}
:style (style/title-style {:status status
:theme theme
:networks-shown? networks})}
title]]))
6 changes: 4 additions & 2 deletions src/quo/components/wallet/token_input/schema.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@
[:currency-symbol [:maybe [:or :string :keyword]]]
[:hint-component {:optional true} [:maybe :schema.common/hiccup]]
[:on-token-press {:optional true} [:maybe fn?]]
[:on-swap [:maybe fn?]]
[:on-swap {:optional true} [:maybe fn?]]
[:container-style {:optional true} [:maybe :map]]
[:error? [:maybe :boolean]]
[:show-token-icon? {:optional true} [:maybe :boolean]]
[:value [:maybe :string]]
[:converted-value [:maybe :string]]]]]
[:converted-value {:optional true} [:maybe :string]]
[:swappable? {:optional true} [:maybe :boolean]]]]]
:any])
5 changes: 2 additions & 3 deletions src/quo/components/wallet/token_input/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,8 @@
{:flex-direction :row
:align-items :flex-end})

(defn input-container
[window-width]
{:width (- window-width 120)
(def input-container
{:flex 1
:margin-left 8
:margin-right 8
:flex-direction :row
Expand Down
65 changes: 37 additions & 28 deletions src/quo/components/wallet/token_input/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,18 @@
(string/upper-case (or (clj->js text) ""))])

(defn input-section
[{:keys [token-symbol on-token-press value error? on-swap currency-symbol]}]
(let [theme (quo.theme/use-theme)
window-width (:width (rn/get-window))]
[{:keys [token-symbol on-token-press value error? on-swap currency-symbol show-token-icon?
swappable?]}]
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two new features of token-input:
If not swappable? we won't display the button to swap between crypto and fiat values.
If not show-token-icon? we do not show icon. Because GWEI or UNITS that we enter in transaction settings screens do not have icons.

(let [theme (quo.theme/use-theme)]
[rn/pressable
{:style {:width "100%"
:flex-direction :row}
:on-press on-token-press}
[token/view
{:token token-symbol
:size :size-32}]
[rn/view {:style (style/input-container window-width)}
(when show-token-icon?
[token/view
{:token token-symbol
:size :size-32}])
[rn/view {:style style/input-container}
[rn/text-input
{:style (style/text-input theme error?)
:placeholder-text-color (style/placeholder-text theme)
Expand All @@ -39,14 +40,15 @@
:editable false
:value value}]
[token-name-text theme currency-symbol]]
[button/button
{:icon true
:icon-only? true
:size 32
:on-press #(when on-swap (on-swap))
:type :outline
:accessibility-label :reorder}
:i/reorder]]))
(when swappable?
[button/button
{:icon true
:icon-only? true
:size 32
:on-press #(when on-swap (on-swap))
:type :outline
:accessibility-label :reorder}
:i/reorder])]))

(defn- view-internal
[{:keys [token-symbol
Expand All @@ -57,26 +59,33 @@
on-swap
converted-value
hint-component
currency-symbol]}]
show-token-icon?
currency-symbol
swappable?]
:or {show-token-icon? true
swappable? true}}]
(let [theme (quo.theme/use-theme)
width (:width (rn/get-window))]
[rn/view {:style (merge (style/main-container width) container-style)}
[rn/view {:style style/amount-container}
[input-section
{:theme theme
:token-symbol token-symbol
:on-token-press on-token-press
:value value
:error? error?
:on-swap on-swap
:currency-symbol currency-symbol}]]
{:theme theme
:token-symbol token-symbol
:on-token-press on-token-press
:value value
:error? error?
:on-swap on-swap
:currency-symbol currency-symbol
:show-token-icon? show-token-icon?
:swappable? swappable?}]]
[divider-line/view {:container-style (style/divider theme)}]
[rn/view {:style style/data-container}
hint-component
[text/text
{:size :paragraph-2
:weight :medium
:style (style/converted-amount theme)}
converted-value]]]))
(when swappable?
[text/text
{:size :paragraph-2
:weight :medium
:style (style/converted-amount theme)}
converted-value])]]))

(def view (schema/instrument #'view-internal component-schema/?schema))
15 changes: 9 additions & 6 deletions src/status_im/common/controlled_input/utils.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
(when (money/bignumber? (value-bn state))
(money/greater-than (value-bn state) (upper-limit-bn state)))))

(defn- lower-limit-exceeded?
(defn lower-limit-exceeded?
[state]
(and (lower-limit state)
(when (money/bignumber? (value-bn state))
Expand All @@ -78,16 +78,19 @@

(defn set-upper-limit
[state limit]
(when limit
(if limit
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without this change set-upper-limit breaks the usage of -> because no value returned when limit not applied

(-> state
(assoc :upper-limit limit)
recheck-errorness)))
recheck-errorness)
state))

(defn set-lower-limit
[state limit]
(-> state
(assoc :lower-limit limit)
recheck-errorness))
(if limit
(-> state
(assoc :lower-limit limit)
recheck-errorness)
state))

(defn increase
[state]
Expand Down
32 changes: 17 additions & 15 deletions src/status_im/contexts/preview/quo/tags/network_tags.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,29 +23,31 @@
:key :title}
{:type :select
:key :networks
:options [{:key 1}
:options [{:key 0}
{:key 1}
{:key 2}
{:key 3}]}
{:type :boolean
:key :blur?}])


(defn view
[]
(let [state (reagent/atom {:title "Tag"
:status :default
:networks 3})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor
:blur? (:blur? @state)
:show-blur-background? true}
[rn/view
{:style {:align-self :center
:justify-content :center
:flex 1}}
[quo/network-tags
(assoc @state
:networks
(nth community-networks (dec (:networks @state))))]]])))
(let [selected-networks-id (dec (:networks @state))]
[preview/preview-container
{:state state
:descriptor descriptor
:blur? (:blur? @state)
:show-blur-background? true}
[rn/view
{:style {:align-self :center
:justify-content :center
:flex 1}}
[quo/network-tags
(assoc @state
:networks
(when (pos? selected-networks-id)
(nth community-networks selected-networks-id)))]]]))))
44 changes: 27 additions & 17 deletions src/status_im/contexts/preview/quo/wallet/token_input.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,29 @@
[{:key :token-symbol
:type :select
:options [{:key :eth}
{:key :snt}]}
{:key :snt}
{:key :gwei}
{:key :units}]}
{:key :currency
:type :select
:options [{:key "$"}
{:key "€"}]}
{:key :error?
:type :boolean}
{:key :show-token-icon?
:type :boolean}
{:key :swappable?
:type :boolean}])


(defn view
[]
(let [state (reagent/atom {:token-symbol :eth
:currency "$"
:crypto? true
:error? false})]
(let [state (reagent/atom {:token-symbol :eth
:currency "$"
:crypto? true
:error? false
:show-token-icon? true
:swappable? true})]
(fn []
(let [{:keys [currency token-symbol crypto? error?]} @state
[input-state set-input-state] (rn/use-state controlled-input/init-state)
Expand Down Expand Up @@ -67,18 +75,20 @@
:component-container-style {:flex 1
:justify-content :space-between}}
[quo/token-input
{:token-symbol token-symbol
:currency-symbol (if crypto? token-symbol currency)
:error? error?
:value input-amount
:converted-value converted-value
:on-swap (fn []
(swap! state assoc :crypto? (not crypto?))
(swap-between-fiat-and-crypto))
:hint-component [quo/network-tags
{:networks networks
:title title
:status (when (:error? @state) :error)}]}]
{:token-symbol token-symbol
:currency-symbol (if crypto? token-symbol currency)
:error? error?
:value input-amount
:converted-value converted-value
:on-swap (fn []
(swap! state assoc :crypto? (not crypto?))
(swap-between-fiat-and-crypto))
:hint-component [quo/network-tags
{:networks networks
:title title
:status (when (:error? @state) :error)}]
:show-token-icon? (:show-token-icon? @state)
:swappable? (:swappable? @state)}]
[quo/numbered-keyboard
{:container-style {:padding-bottom (safe-area/get-top)}
:left-action :dot
Expand Down
Loading