Skip to content

Commit 589a581

Browse files
J-Son89J-Son89
authored
chore(wallet): add ui for send page (#17786) - merged in (#18017)
--------- Co-authored-by: Rende11 <[email protected]>
1 parent 0546a87 commit 589a581

File tree

14 files changed

+315
-51
lines changed

14 files changed

+315
-51
lines changed

‎resources/images/icons2/20x20/[email protected]

1.05 KB
Loading

‎resources/images/icons2/20x20/[email protected]

1.46 KB
Loading

‎src/quo/components/numbered_keyboard/keyboard_key/component_spec.cljs

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
:blur? false
3737
:type :digit} 1])
3838
(h/is-truthy (h/query-by-label-text :text-label))
39-
(h/fire-event :press (h/query-by-label-text :keyboard-key))
39+
(h/fire-event :press (h/query-by-label-text :keyboard-key-1))
4040
(h/was-called on-press)))
4141

4242
(h/test "Is not pressable when disabled is true"
@@ -47,5 +47,5 @@
4747
:blur? false
4848
:type :digit} 1])
4949
(h/is-truthy (h/query-by-label-text :text-label))
50-
(h/fire-event :press (h/query-by-label-text :keyboard-key))
50+
(h/fire-event :press (h/query-by-label-text :keyboard-key-1))
5151
(h/was-not-called on-press))))

‎src/quo/components/numbered_keyboard/keyboard_key/view.cljs

+9-2
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,23 @@
77
[react-native.core :as rn]
88
[reagent.core :as reagent]))
99

10+
(defn- label->accessibility-label
11+
[label]
12+
(let [label-name (if (keyword? label) (name label) label)]
13+
(keyword (str "keyboard-key-" label-name))))
14+
1015
(defn- view-internal
1116
[]
1217
(let [pressed? (reagent/atom false)]
1318
(fn [{:keys [disabled? theme blur? on-press type]} label]
1419
(let [label-color (style/get-label-color disabled? theme blur?)
1520
background-color (style/toggle-background-color @pressed? blur? theme)]
1621
[rn/pressable
17-
{:accessibility-label :keyboard-key
22+
{:accessibility-label (label->accessibility-label label)
1823
:disabled (or disabled? (not label))
19-
:on-press (fn [] (on-press label))
24+
:on-press (fn []
25+
(when on-press
26+
(on-press label)))
2027
:on-press-in #(reset! pressed? true)
2128
:on-press-out #(reset! pressed? false)
2229
:style (style/container background-color)}

‎src/quo/components/numbered_keyboard/numbered_keyboard/style.cljs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
(ns quo.components.numbered-keyboard.numbered-keyboard.style)
22

33
(def container
4-
{:flex 1
4+
{:display :flex
55
:padding-top 8
66
:padding-horizontal 48})
77

‎src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs

+8-4
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,17 @@
1717

1818
(defn- view-internal
1919
[]
20-
(fn [{:keys [disabled? theme blur? left-action delete-key? on-press]}]
20+
(fn [{:keys [disabled? theme blur? left-action delete-key? on-press on-delete
21+
container-style]
22+
:or {left-action :none}}]
2123
[rn/view
22-
{:style style/container}
24+
{:style (merge style/container
25+
container-style)}
2326
(for [row-index (range 1 4)]
2427
^{:key row-index}
2528
[rn/view {:style style/row-container}
2629
(for [column-index (range 1 4)]
30+
^{:key (str row-index column-index)}
2731
[keyboard-item
2832
{:item (+ (* (dec row-index) 3) column-index)
2933
:type :digit
@@ -58,10 +62,10 @@
5862
:theme theme}]
5963
(if delete-key?
6064
[keyboard-item
61-
{:item :i/delete
65+
{:item :i/backspace
6266
:type :key
6367
:disabled? disabled?
64-
:on-press on-press
68+
:on-press on-delete
6569
:blur? blur?
6670
:theme theme}]
6771
[keyboard-item])]]))

‎src/quo/components/wallet/token_input/view.cljs

+42-22
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,26 @@
1515

1616
(defn calc-value
1717
[crypto? currency token value conversion]
18-
(if crypto?
19-
(str (get common/currency-label currency) (.toFixed (* value conversion) 2))
20-
(str (.toFixed (/ value conversion) 2) " " (string/upper-case (clj->js token)))))
18+
(let [num-value (if (string? value) (parse-double (or value "0")) value)]
19+
(if crypto?
20+
(str (get common/currency-label currency) (.toFixed (* num-value conversion) 2))
21+
(str (.toFixed (/ num-value conversion) 2) " " (string/upper-case (or (clj->js token) ""))))))
2122

2223
(defn- view-internal
23-
[]
24-
(let [width (:width (rn/get-window))
25-
value (reagent/atom 0)
26-
crypto? (reagent/atom true)
27-
input-ref (atom nil)]
28-
(fn [{:keys [theme token currency conversion networks title customization-color]}]
29-
[rn/view {:style (style/main-container width)}
24+
[{external-value :value}]
25+
(let [width (:width (rn/get-window))
26+
value (reagent/atom nil)
27+
crypto? (reagent/atom true)
28+
input-ref (atom nil)
29+
controlled-input? (some? external-value)]
30+
(fn [{:keys [theme token currency conversion networks title customization-color
31+
on-change-text on-swap container-style show-keyboard?]
32+
:or {show-keyboard? true}
33+
external-value :value}]
34+
[rn/view
35+
{:style (merge
36+
(style/main-container width)
37+
container-style)}
3038
[rn/view {:style style/amount-container}
3139
[rn/pressable
3240
{:on-press #(when @input-ref (.focus ^js @input-ref))
@@ -37,27 +45,39 @@
3745
{:style style/token
3846
:source (resources/get-token token)}]
3947
[rn/text-input
40-
{:ref #(reset! input-ref %)
41-
:placeholder "0"
42-
:placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
43-
:keyboard-type :numeric
44-
:max-length 12
45-
:default-value @value
46-
:on-change-text #(reset! value %)
47-
:style (style/text-input theme)
48-
:selection-color customization-color}]
48+
(cond-> {:auto-focus true
49+
:ref #(reset! input-ref %)
50+
:placeholder "0"
51+
:placeholder-text-color (colors/theme-colors colors/neutral-40
52+
colors/neutral-50
53+
theme)
54+
:keyboard-type :numeric
55+
:max-length 12
56+
:on-change-text (fn [v]
57+
(when-not controlled-input?
58+
(reset! value v))
59+
(when on-change-text
60+
(on-change-text v)))
61+
:style (style/text-input theme)
62+
:selection-color customization-color
63+
:show-soft-input-on-focus show-keyboard?}
64+
controlled-input? (assoc :value external-value)
65+
(not controlled-input?) (assoc :default-value @value))]
4966
[text/text
5067
{:size :paragraph-2
5168
:weight :semi-bold
5269
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
5370
:margin-right 8
5471
:padding-bottom 2}}
55-
(string/upper-case (clj->js (if @crypto? token currency)))]]
72+
(string/upper-case (or (clj->js (if @crypto? token currency)) ""))]]
5673
[button/button
5774
{:icon true
5875
:icon-only? true
5976
:size 32
60-
:on-press #(swap! crypto? not)
77+
:on-press (fn []
78+
(swap! crypto? not)
79+
(when on-swap
80+
(on-swap @crypto?)))
6181
:type :outline
6282
:accessibility-label :reorder}
6383
:i/reorder]]
@@ -68,6 +88,6 @@
6888
{:size :paragraph-2
6989
:weight :medium
7090
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
71-
(calc-value @crypto? currency token @value conversion)]]])))
91+
(calc-value @crypto? currency token (or external-value @value) conversion)]]])))
7292

7393
(def view (quo.theme/with-theme view-internal))

‎src/status_im2/contexts/wallet/common/temp.cljs

+1-18
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,11 @@
11
(ns status-im2.contexts.wallet.common.temp
22
(:require
33
[clojure.string :as string]
4-
[quo.core :as quo]
54
[quo.foundations.resources :as quo.resources]
65
[react-native.core :as rn]
76
[status-im2.common.resources :as status.resources]
87
[status-im2.constants :as constants]
9-
[utils.i18n :as i18n]
10-
[utils.re-frame :as rf]))
11-
12-
13-
(defn wallet-temporary-navigation
14-
[]
15-
[rn/view
16-
{:style {:flex 1
17-
:align-items :center
18-
:justify-content :center}}
19-
[quo/text {} "TEMPORARY NAVIGATION"]
20-
[quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-accounts])}
21-
"Navigate to Account"]
22-
[quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-create-account])}
23-
"Create Account"]
24-
[quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-saved-addresses])}
25-
"Saved Addresses"]])
8+
[utils.i18n :as i18n]))
269

2710
(defn wallet-overview-state
2811
[networks]

‎src/status_im2/contexts/wallet/send/input_amount/component_spec.cljs

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
(ns status-im2.contexts.wallet.send.input-amount.component-spec
2+
(:require
3+
[re-frame.core :as re-frame]
4+
[status-im2.contexts.wallet.send.input-amount.view :as input-amount]
5+
[test-helpers.component :as h]))
6+
7+
(defn setup-subs
8+
[subscriptions]
9+
(doseq [keyval subscriptions]
10+
(re-frame/reg-sub
11+
(key keyval)
12+
(fn [_] (val keyval)))))
13+
14+
(def sub-mocks
15+
{:profile/profile {:currency :usd}
16+
:wallet/network-details [{:source 525
17+
:short-name "eth"
18+
:network-name :ethereum
19+
:chain-id 1
20+
:related-chain-id 5}]})
21+
22+
(h/describe "Send > input amount screen"
23+
(h/test "Default render"
24+
(setup-subs sub-mocks)
25+
(h/render [input-amount/view {}])
26+
(h/is-truthy (h/get-by-text "0"))
27+
(h/is-truthy (h/get-by-text "ETH"))
28+
(h/is-truthy (h/get-by-text "$0.00"))
29+
(h/is-disabled (h/get-by-label-text :button-one)))
30+
31+
(h/test "Fill token input and confirm"
32+
(setup-subs sub-mocks)
33+
(let [on-confirm (h/mock-fn)]
34+
(h/render [input-amount/view
35+
{:on-confirm on-confirm
36+
:rate 10}])
37+
38+
(h/fire-event :press (h/query-by-label-text :keyboard-key-1))
39+
(h/fire-event :press (h/query-by-label-text :keyboard-key-2))
40+
(h/fire-event :press (h/query-by-label-text :keyboard-key-3))
41+
(h/fire-event :press (h/query-by-label-text :keyboard-key-.))
42+
(h/fire-event :press (h/query-by-label-text :keyboard-key-4))
43+
(h/fire-event :press (h/query-by-label-text :keyboard-key-5))
44+
45+
(h/wait-for #(h/is-truthy (h/get-by-text "$1234.50")))
46+
47+
(h/is-truthy (h/get-by-label-text :button-one))
48+
49+
(h/fire-event :press (h/get-by-label-text :button-one))
50+
(h/was-called on-confirm)))
51+
52+
(h/test "Try to fill more than limit"
53+
(setup-subs sub-mocks)
54+
(h/render [input-amount/view
55+
{:rate 10
56+
:limit 286}])
57+
58+
(h/fire-event :press (h/query-by-label-text :keyboard-key-2))
59+
(h/fire-event :press (h/query-by-label-text :keyboard-key-9))
60+
(h/fire-event :press (h/query-by-label-text :keyboard-key-5))
61+
62+
(h/wait-for #(h/is-truthy (h/get-by-text "$290.00")))
63+
64+
(h/fire-event :press (h/query-by-label-text :keyboard-key-backspace))
65+
(h/fire-event :press (h/query-by-label-text :keyboard-key-8))
66+
(h/fire-event :press (h/query-by-label-text :keyboard-key-5))
67+
(h/wait-for #(h/is-truthy (h/get-by-text "$2850.00"))))
68+
69+
(h/test "Switch from crypto to fiat and check limit"
70+
(setup-subs sub-mocks)
71+
(h/render [input-amount/view
72+
{:rate 10
73+
:limit 250}])
74+
75+
(h/fire-event :press (h/query-by-label-text :keyboard-key-2))
76+
(h/fire-event :press (h/query-by-label-text :keyboard-key-0))
77+
(h/wait-for #(h/is-truthy (h/get-by-text "$200.00")))
78+
79+
(h/fire-event :press (h/query-by-label-text :reorder))
80+
81+
(h/wait-for #(h/is-truthy (h/get-by-text "2.00 ETH")))
82+
83+
(h/fire-event :press (h/query-by-label-text :keyboard-key-5))
84+
(h/fire-event :press (h/query-by-label-text :keyboard-key-5))
85+
86+
(h/wait-for #(h/is-truthy (h/get-by-text "205.50 ETH")))
87+
(h/fire-event :press (h/query-by-label-text :keyboard-key-5))
88+
(h/wait-for #(h/is-truthy (h/get-by-text "205.50 ETH")))))

‎src/status_im2/contexts/wallet/send/input_amount/style.cljs

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
(ns status-im2.contexts.wallet.send.input-amount.style)
2+
3+
(def screen
4+
{:flex 1})
5+
6+
(def input-container
7+
{:padding-top 12
8+
:padding-bottom 0})
9+
10+
(defn keyboard-container
11+
[bottom]
12+
{:padding-bottom bottom})

0 commit comments

Comments
 (0)