Reuse controlled input logic in collectibles sending page (#20146)

* reuse controlled input logic for sending collectibles

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+\.]")
 

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]

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)
+      {:max-value       (controlled-input/upper-limit value)
-       :min-value       1
+       :min-value       (controlled-input/lower-limit value)
-       :value           value
+       :value           (controlled-input/numeric-value value)
-       :on-inc-press    inc-value
+       :on-inc-press    increase-value
-       :on-dec-press    dec-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-press    add-character
-       :on-delete   delete-digit}]]))
+       :on-delete   delete-character}]]))
-