Don't autocorrect entered text (but still show error messages).
Autocorrecting the text in the amount field leads to typos, like 11 instead of 1,0001, etc. We really want to avoid these types of typos for amounts. Signed-off-by: Igor Mandrigin <i@mandrigin.ru>
This commit is contained in:
parent
84208aeb85
commit
502e8b9908
|
@ -20,6 +20,7 @@
|
||||||
[status-im.ui.screens.wallet.utils :as wallet.utils]
|
[status-im.ui.screens.wallet.utils :as wallet.utils]
|
||||||
[status-im.utils.ethereum.core :as ethereum]
|
[status-im.utils.ethereum.core :as ethereum]
|
||||||
[status-im.utils.ethereum.tokens :as tokens]
|
[status-im.utils.ethereum.tokens :as tokens]
|
||||||
|
[status-im.utils.money :as money]
|
||||||
[status-im.utils.platform :as platform]
|
[status-im.utils.platform :as platform]
|
||||||
[status-im.ui.components.tooltip.views :as tooltip]
|
[status-im.ui.components.tooltip.views :as tooltip]
|
||||||
[status-im.utils.utils :as utils]))
|
[status-im.utils.utils :as utils]))
|
||||||
|
@ -184,18 +185,23 @@
|
||||||
[recipient-contact address name request?]
|
[recipient-contact address name request?]
|
||||||
[recipient-address address])]])
|
[recipient-address address])]])
|
||||||
|
|
||||||
(defn- amount-input [{:keys [input-options disabled?]}]
|
(defn- amount-input [{:keys [input-options amount amount-text disabled?]}]
|
||||||
[react/view {:style components.styles/flex
|
[react/view {:style components.styles/flex
|
||||||
:accessibility-label :specify-amount-button}
|
:accessibility-label :specify-amount-button}
|
||||||
[components/text-input
|
[components/text-input
|
||||||
(merge
|
(merge
|
||||||
|
input-options
|
||||||
|
;; We only auto-correct and prettify user's input when it is valid and positive.
|
||||||
|
;; Otherwise, user might want to fix his input and autocorrection will give more harm than good.
|
||||||
|
;; Positive check is because we don't want to replace unfinished 0.000 with just plain 0, that is annoying and
|
||||||
|
;; potentially dangerous on this screen (e.g. sending 7 ETH instead of 0.0007)
|
||||||
|
{:default-value (if (empty? amount-text) (str (money/to-fixed (money/wei->ether amount))) amount-text)}
|
||||||
(if disabled?
|
(if disabled?
|
||||||
{:editable false}
|
{:editable false}
|
||||||
{:keyboard-type :numeric
|
{:keyboard-type :numeric
|
||||||
:placeholder (i18n/label :t/amount-placeholder)
|
:placeholder (i18n/label :t/amount-placeholder)
|
||||||
:style components.styles/flex
|
:style components.styles/flex
|
||||||
:accessibility-label :amount-input})
|
:accessibility-label :amount-input}))]])
|
||||||
input-options)]])
|
|
||||||
|
|
||||||
(defn amount-selector [{:keys [error disabled?] :as m}]
|
(defn amount-selector [{:keys [error disabled?] :as m}]
|
||||||
[react/view
|
[react/view
|
||||||
|
|
|
@ -19,7 +19,6 @@
|
||||||
[status-im.ui.screens.wallet.components.views :as components]
|
[status-im.ui.screens.wallet.components.views :as components]
|
||||||
[status-im.utils.ethereum.core :as ethereum]
|
[status-im.utils.ethereum.core :as ethereum]
|
||||||
[status-im.utils.ethereum.eip681 :as eip681]
|
[status-im.utils.ethereum.eip681 :as eip681]
|
||||||
[status-im.utils.money :as money]
|
|
||||||
[status-im.utils.utils :as utils]))
|
[status-im.utils.utils :as utils]))
|
||||||
|
|
||||||
;; Request screen
|
;; Request screen
|
||||||
|
@ -42,17 +41,11 @@
|
||||||
[components/asset-selector {:disabled? true
|
[components/asset-selector {:disabled? true
|
||||||
:symbol :ETH}]
|
:symbol :ETH}]
|
||||||
[components/amount-selector {:error amount-error
|
[components/amount-selector {:error amount-error
|
||||||
|
:amount amount
|
||||||
|
:amount-text amount-text
|
||||||
:input-options {:max-length 21
|
:input-options {:max-length 21
|
||||||
:on-focus (fn [] (when @scroll (utils/set-timeout #(.scrollToEnd @scroll) 100)))
|
:on-focus (fn [] (when @scroll (utils/set-timeout #(.scrollToEnd @scroll) 100)))
|
||||||
:on-change-text #(re-frame/dispatch [:wallet.request/set-and-validate-amount %])
|
:on-change-text #(re-frame/dispatch [:wallet.request/set-and-validate-amount %])}}]]]
|
||||||
;; (similarly to status-im.ui.screens.wallet.send.views `send-transaction-panel`)
|
|
||||||
;; We only auto-correct and prettify user's input when it is valid and positive.
|
|
||||||
;; Otherwise, user might want to fix his input and autocorrection will give more harm than good.
|
|
||||||
;; Positive check is because we don't want to replace unfinished 0.000 with just plain 0, that is annoying and
|
|
||||||
;; potentially dangerous on this screen (e.g. sending 7 ETH instead of 0.0007)
|
|
||||||
:default-value (if (pos? amount)
|
|
||||||
(str (money/to-fixed (money/wei->ether amount)))
|
|
||||||
amount-text)}}]]]
|
|
||||||
[bottom-buttons/bottom-buttons styles/bottom-buttons
|
[bottom-buttons/bottom-buttons styles/bottom-buttons
|
||||||
nil ;; Force a phantom button to ensure consistency with other transaction screens which define 2 buttons
|
nil ;; Force a phantom button to ensure consistency with other transaction screens which define 2 buttons
|
||||||
[button/button {:disabled? (not (and to amount))
|
[button/button {:disabled? (not (and to amount))
|
||||||
|
|
|
@ -192,12 +192,6 @@
|
||||||
(when advanced?
|
(when advanced?
|
||||||
[advanced-cartouche transaction modal?])])
|
[advanced-cartouche transaction modal?])])
|
||||||
|
|
||||||
(defn update-amount-fn [timeout]
|
|
||||||
(fn [amount]
|
|
||||||
(when @timeout
|
|
||||||
(utils/clear-timeout @timeout))
|
|
||||||
(reset! timeout (utils/set-timeout #(re-frame/dispatch [:wallet.send/set-and-validate-amount amount]) 500))))
|
|
||||||
|
|
||||||
(defn- send-transaction-panel [{:keys [modal? transaction scroll advanced? symbol]}]
|
(defn- send-transaction-panel [{:keys [modal? transaction scroll advanced? symbol]}]
|
||||||
(let [{:keys [amount amount-text amount-error signing? to to-name sufficient-funds? in-progress? from-chat?]} transaction
|
(let [{:keys [amount amount-text amount-error signing? to to-name sufficient-funds? in-progress? from-chat?]} transaction
|
||||||
timeout (atom nil)]
|
timeout (atom nil)]
|
||||||
|
@ -221,17 +215,11 @@
|
||||||
[components/amount-selector {:disabled? (or from-chat? modal?)
|
[components/amount-selector {:disabled? (or from-chat? modal?)
|
||||||
:error (or amount-error
|
:error (or amount-error
|
||||||
(when-not sufficient-funds? (i18n/label :t/wallet-insufficient-funds)))
|
(when-not sufficient-funds? (i18n/label :t/wallet-insufficient-funds)))
|
||||||
|
:amount amount
|
||||||
|
:amount-text amount-text
|
||||||
:input-options {:max-length 21
|
:input-options {:max-length 21
|
||||||
:on-focus (fn [] (when (and scroll @scroll) (utils/set-timeout #(.scrollToEnd @scroll) 100)))
|
:on-focus (fn [] (when (and scroll @scroll) (utils/set-timeout #(.scrollToEnd @scroll) 100)))
|
||||||
:on-change-text (update-amount-fn timeout)
|
:on-change-text #(re-frame/dispatch [:wallet.send/set-and-validate-amount %])}}]
|
||||||
;; (similarly to status-im.ui.screens.wallet.request.views `send-transaction-request` view)
|
|
||||||
;; We only auto-correct and prettify user's input when it is valid and positive.
|
|
||||||
;; Otherwise, user might want to fix his input and autocorrection will give more harm than good.
|
|
||||||
;; Positive check is because we don't want to replace unfinished 0.000 with just plain 0, that is annoying and
|
|
||||||
;; potentially dangerous on this screen (e.g. sending 7 ETH instead of 0.0007)
|
|
||||||
:default-value (if (pos? amount)
|
|
||||||
(str (money/to-fixed (money/wei->ether amount)))
|
|
||||||
amount-text)}}]
|
|
||||||
[advanced-options advanced? transaction modal? scroll]]]
|
[advanced-options advanced? transaction modal? scroll]]]
|
||||||
(if signing?
|
(if signing?
|
||||||
[signing-buttons
|
[signing-buttons
|
||||||
|
|
Loading…
Reference in New Issue