diff --git a/src/status_im/common/controlled_input/utils.cljs b/src/status_im/common/controlled_input/utils.cljs index 7858853e0d..8a56be6693 100644 --- a/src/status_im/common/controlled_input/utils.cljs +++ b/src/status_im/common/controlled_input/utils.cljs @@ -5,7 +5,8 @@ (def init-state {:value "" :error? false - :upper-limit nil}) + :upper-limit nil + :lower-limit nil}) (defn input-value [state] @@ -23,19 +24,31 @@ [state error?] (assoc state :error? error?)) -(defn- upper-limit +(defn upper-limit [state] (:upper-limit state)) +(defn lower-limit + [state] + (:lower-limit state)) + (defn upper-limit-exceeded? [state] (and (upper-limit state) (> (numeric-value state) (upper-limit state)))) +(defn lower-limit-exceeded? + [state] + (and + (lower-limit state) + (< (numeric-value state) (lower-limit state)))) + (defn- recheck-errorness [state] - (set-input-error state (upper-limit-exceeded? state))) + (set-input-error state + (or (upper-limit-exceeded? state) + (lower-limit-exceeded? state)))) (defn set-input-value [state value] @@ -43,12 +56,33 @@ (assoc :value value) recheck-errorness)) +(defn set-numeric-value + [state value] + (set-input-value state (str value))) + (defn set-upper-limit + [state limit] + (when limit + (-> state + (assoc :upper-limit limit) + recheck-errorness))) + +(defn set-lower-limit [state limit] (-> state - (assoc :upper-limit limit) + (assoc :lower-limit limit) recheck-errorness)) +(defn increase + [state] + (let [new-val (inc (numeric-value state))] + (set-input-value state (str new-val)))) + +(defn decrease + [state] + (let [new-val (dec (numeric-value state))] + (set-input-value state (str new-val)))) + (def ^:private not-digits-or-dot-pattern #"[^0-9+\.]") diff --git a/src/status_im/contexts/wallet/collectible/utils.cljs b/src/status_im/contexts/wallet/collectible/utils.cljs index 4e8d2afc41..2688393b9f 100644 --- a/src/status_im/contexts/wallet/collectible/utils.cljs +++ b/src/status_im/contexts/wallet/collectible/utils.cljs @@ -17,7 +17,8 @@ "image/gif" "image/bmp" "image/png" - "image/webp"}) + "image/webp" + "image/avif"}) (defn supported-file? [collectible-type] diff --git a/src/status_im/contexts/wallet/send/select_collectible_amount/view.cljs b/src/status_im/contexts/wallet/send/select_collectible_amount/view.cljs index 53a60b66f5..3c5373bc9b 100644 --- a/src/status_im/contexts/wallet/send/select_collectible_amount/view.cljs +++ b/src/status_im/contexts/wallet/send/select_collectible_amount/view.cljs @@ -2,6 +2,7 @@ (:require [quo.core :as quo] [react-native.core :as rn] + [status-im.common.controlled-input.utils :as controlled-input] [status-im.contexts.wallet.collectible.utils :as utils] [status-im.contexts.wallet.common.account-switcher.view :as account-switcher] [status-im.contexts.wallet.send.select-collectible-amount.style :as style] @@ -11,24 +12,23 @@ (defn view [] (let [on-close (rn/use-callback #(rf/dispatch [:navigate-back])) - [value set-value] (rn/use-state 1) - inc-value (rn/use-callback (fn [] (set-value (inc value))) - [value]) - dec-value (rn/use-callback (fn [] (set-value (dec value))) - [value]) - add-digit (rn/use-callback (fn [digit] - (set-value (+ (js/parseInt digit) - (* value 10)))) - [value]) - delete-digit (rn/use-callback (fn [] - (set-value (Math/floor (/ value 10)))) - [value]) - send-transaction-data (rf/sub [:wallet/wallet-send]) collectible (:collectible send-transaction-data) balance (utils/collectible-balance collectible) + [value set-value] (rn/use-state (-> controlled-input/init-state + (controlled-input/set-numeric-value 1) + (controlled-input/set-lower-limit 1))) preview-uri (get-in collectible [:preview-url :uri]) - incorrect-value? (or (< value 1) (> value balance))] + incorrect-value? (controlled-input/input-error value) + increase-value (rn/use-callback #(set-value controlled-input/increase)) + decrease-value (rn/use-callback #(set-value controlled-input/decrease)) + delete-character (rn/use-callback #(set-value controlled-input/delete-last)) + add-character (rn/use-callback (fn [c] + (set-value #(controlled-input/add-character % c))))] + (rn/use-effect + (fn [] + (set-value #(controlled-input/set-upper-limit % balance))) + [balance]) [rn/view [account-switcher/view {:icon-name :i/arrow-left @@ -44,13 +44,12 @@ {:title (i18n/label :t/max {:number balance}) :status (if incorrect-value? :error :default) :container-style style/network-tags-container}] - [quo/amount-input - {:max-value (if (integer? balance) balance 0) - :min-value 1 - :value value - :on-inc-press inc-value - :on-dec-press dec-value + {:max-value (controlled-input/upper-limit value) + :min-value (controlled-input/lower-limit value) + :value (controlled-input/numeric-value value) + :on-inc-press increase-value + :on-dec-press decrease-value :container-style style/amount-input-container :status (if incorrect-value? :error :default)}] [quo/bottom-actions @@ -58,12 +57,11 @@ :button-one-props {:on-press #(rf/dispatch [:wallet/set-collectible-amount-to-send {:stack-id :screen/wallet.select-collectible-amount - :amount value}]) + :amount (controlled-input/numeric-value value)}]) :disabled? incorrect-value?} :button-one-label (i18n/label :t/confirm)}] [quo/numbered-keyboard {:left-action :none :delete-key? true - :on-press add-digit - :on-delete delete-digit}]])) - + :on-press add-character + :on-delete delete-character}]]))