token input refactoring

Author: vkjr

ios/Podfile.lock

@@ -1485,7 +1485,7 @@ SPEC CHECKSUMS:
   FBLazyVector: 56e0e498dbb513b96c40bac6284729ba4e62672d
   FBReactNativeSpec: 146c741a3f40361f6bc13a4ba284678cbedb5881
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
+  glog: 36c15c01d70ed395c6e4f3619f98a23ee415b07a
   hermes-engine: 1d1835b2cc54c381909d94d1b3c8e0a2f1a94a0e
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8

src/quo/components/wallet/token_input/component_spec.cljs

@@ -6,16 +6,20 @@
 (h/describe "Wallet: Token Input"
   (h/test "Token label renders"
     (h/render-with-theme-provider [token-input/view
-                                   {:token      :snt
-                                    :currency   :eur
-                                    :crypto?    true
-                                    :conversion 1}])
+                                   {:token-symbol    :snt
+                                    :currency-symbol :snt
+                                    :on-swap         nil
+                                    :error?          false
+                                    :value           "1"
+                                    :converted-value "10"}])
     (h/is-truthy (h/get-by-text "SNT")))
 
   (h/test "Amount renders"
     (h/render-with-theme-provider [token-input/view
-                                   {:token           :snt
-                                    :currency        :eur
-                                    :converted-value "€0.00"
-                                    :conversion      1}])
+                                   {:token-symbol    :snt
+                                    :currency-symbol :snt
+                                    :on-swap         nil
+                                    :error?          false
+                                    :value           "1"
+                                    :converted-value "€0.00"}])
     (h/is-truthy (h/get-by-text "€0.00"))))

src/quo/components/wallet/token_input/schema.cljs

@@ -4,15 +4,14 @@
   [:=>
    [:catn
     [:props
-     [:map
-      [:token {:optional true} [:maybe [:or :string :keyword]]]
-      [:currency {:optional true} [:maybe [:or :string :keyword]]]
-      [:error? {:optional true} [:maybe :boolean]]
-      [:title {:optional true} [:maybe :string]]
-      [:conversion {:optional true} [:maybe :double]]
-      [:show-keyboard? {:optional true} [:maybe :boolean]]
-      [:networks {:optional true}
-       [:maybe [:sequential [:map [:source [:maybe :schema.common/image-source]]]]]]
-      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
-      [:value {:optional true} [:maybe :string]]]]]
+     [:map {:closed true}
+      [:token-symbol [:maybe [:or :string :keyword]]]
+      [: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?]]
+      [:container-style {:optional true} [:maybe :map]]
+      [:error? [:maybe :boolean]]
+      [:value [:maybe :string]]
+      [:converted-value [:maybe :string]]]]]
    :any])

src/quo/components/wallet/token_input/style.cljs

@@ -25,9 +25,11 @@
 
 (defn input-container
   [window-width]
-  {:width        (- window-width 120)
-   :margin-left  8
-   :margin-right 8})
+  {:width          (- window-width 120)
+   :margin-left    8
+   :margin-right   8
+   :flex-direction :row
+   :align-items    :flex-end})
 
 (def text-input-dimensions
   (-> typography/heading-1
@@ -65,6 +67,6 @@
    :justify-content    :space-between
    :align-items        :center})
 
-(defn fiat-amount
+(defn converted-amount
   [theme]
   {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})

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

@@ -1,31 +1,16 @@
 (ns quo.components.wallet.token-input.view
   (:require
     [clojure.string :as string]
-    [oops.core :as oops]
     [quo.components.buttons.button.view :as button]
     [quo.components.dividers.divider-line.view :as divider-line]
     [quo.components.markdown.text :as text]
-    [quo.components.tags.network-tags.view :as network-tag]
     [quo.components.utilities.token.view :as token]
     [quo.components.wallet.token-input.schema :as component-schema]
     [quo.components.wallet.token-input.style :as style]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [schema.core :as schema]))
 
-(defn- data-info
-  [{:keys [theme networks title converted-value error?]}]
-  [rn/view {:style style/data-container}
-   [network-tag/view
-    {:networks networks
-     :title    title
-     :status   (when error? :error)}]
-   [text/text
-    {:size   :paragraph-2
-     :weight :medium
-     :style  (style/fiat-amount theme)}
-    converted-value]])
-
 (defn- token-name-text
   [theme text]
   [text/text
@@ -35,85 +20,63 @@
    (string/upper-case (or (clj->js text) ""))])
 
 (defn input-section
-  [{:keys [on-change-text value value-internal set-value-internal on-selection-change
-           on-token-press]}]
-  (let [input-ref               (atom nil)
-        set-ref                 #(reset! input-ref %)
-        focus-input             #(when-let [ref ^js @input-ref]
-                                   (.focus ref))
-        controlled-input?       (some? value)
-        handle-on-change-text   (fn [v]
-                                  (when-not controlled-input?
-                                    (set-value-internal v))
-                                  (when on-change-text
-                                    (on-change-text v)))
-        handle-selection-change (fn [^js e]
-                                  (when on-selection-change
-                                    (-> e
-                                        (oops/oget "nativeEvent.selection")
-                                        (js->clj :keywordize-keys true)
-                                        (on-selection-change))))]
-    (fn [{:keys [token customization-color show-keyboard? crypto? currency value error? selection
-                 handle-on-swap allow-selection?]
-          :or   {show-keyboard?   true
-                 allow-selection? true}}]
-      (let [theme        (quo.theme/use-theme)
-            window-width (:width (rn/get-window))]
-        [rn/pressable
-         {:style    {:width          "100%"
-                     :flex-direction :row}
-          :on-press on-token-press}
-         [token/view
-          {:token token
-           :size  :size-32}]
-         [rn/view {:style (style/input-container window-width)}
-          [rn/pressable
-           {:style    style/text-input-container
-            :on-press focus-input}
-           [rn/text-input
-            (cond-> {:style                    (style/text-input theme error?)
-                     :placeholder-text-color   (style/placeholder-text theme)
-                     :auto-focus               true
-                     :ref                      set-ref
-                     :placeholder              "0"
-                     :keyboard-type            :numeric
-                     :on-change-text           handle-on-change-text
-                     :selection-color          customization-color
-                     :show-soft-input-on-focus show-keyboard?
-                     :on-selection-change      handle-selection-change
-                     :selection                (clj->js selection)
-                     :editable                 allow-selection?}
-              controlled-input?       (assoc :value value)
-              (not controlled-input?) (assoc :default-value value-internal))]
-           [token-name-text theme (if crypto? token currency)]]]
-         [button/button
-          {:icon                true
-           :icon-only?          true
-           :size                32
-           :on-press            handle-on-swap
-           :type                :outline
-           :accessibility-label :reorder}
-          :i/reorder]]))))
+  [{:keys [token-symbol on-token-press value error? on-swap currency-symbol]}]
+  (let [theme        (quo.theme/use-theme)
+        window-width (:width (rn/get-window))]
+    [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)}
+      [rn/text-input
+       {:style                  (style/text-input theme error?)
+        :placeholder-text-color (style/placeholder-text theme)
+        :placeholder            "0"
+        :keyboard-type          :numeric
+        :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]]))
 
 (defn- view-internal
-  [{:keys [container-style on-swap crypto?] :as props}]
-  (let [theme                               (quo.theme/use-theme)
-        width                               (:width (rn/get-window))
-        [value-internal set-value-internal] (rn/use-state nil)
-        handle-on-swap                      (rn/use-callback
-                                             (fn []
-                                               (when on-swap (on-swap (not crypto?))))
-                                             [on-swap])]
+  [{:keys [token-symbol
+           value
+           on-token-press
+           error?
+           container-style
+           on-swap
+           converted-value
+           hint-component
+           currency-symbol]}]
+  (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
-       (assoc props
-              :value-internal     value-internal
-              :theme              theme
-              :set-value-internal set-value-internal
-              :handle-on-swap     handle-on-swap
-              :crypto?            crypto?)]]
+       {:theme           theme
+        :token-symbol    token-symbol
+        :on-token-press  on-token-press
+        :value           value
+        :error?          error?
+        :on-swap         on-swap
+        :currency-symbol currency-symbol}]]
      [divider-line/view {:container-style (style/divider theme)}]
-     [data-info (assoc props :theme theme)]]))
+     [rn/view {:style style/data-container}
+      hint-component
+      [text/text
+       {:size   :paragraph-2
+        :weight :medium
+        :style  (style/converted-amount theme)}
+       converted-value]]]))
 
 (def view (schema/instrument #'view-internal component-schema/?schema))

src/status_im/common/controlled_input/utils.cljs

@@ -1,6 +1,8 @@
 (ns status-im.common.controlled-input.utils
   (:require
-    [clojure.string :as string]))
+    [clojure.string :as string]
+    [status-im.contexts.wallet.common.utils :as wallet-utils]
+    [utils.money :as money]))
 
 (def init-state
   {:value       ""
@@ -14,7 +16,7 @@
 
 (defn numeric-value
   [state]
-  (or (parse-double (input-value state)) 0))
+  (money/bignumber (input-value state)))
 
 (defn input-error
   [state]
@@ -26,23 +28,27 @@
 
 (defn upper-limit
   [state]
-  (:upper-limit state))
+  (money/bignumber (:upper-limit state)))
 
 (defn lower-limit
   [state]
-  (:lower-limit state))
+  (money/bignumber (:lower-limit state)))
 
 (defn upper-limit-exceeded?
   [state]
-  (and
-   (upper-limit state)
-   (> (numeric-value state) (upper-limit state))))
+  (let [num-value (numeric-value state)]
+    (and
+     (upper-limit state)
+     (when (money/bignumber? num-value)
+       (money/greater-than (numeric-value state) (upper-limit state))))))
 
-(defn lower-limit-exceeded?
+(defn- lower-limit-exceeded?
   [state]
-  (and
-   (lower-limit state)
-   (< (numeric-value state) (lower-limit state))))
+  (let [num-value (numeric-value state)]
+    (and
+     (lower-limit state)
+     (when (money/bignumber? num-value)
+       (money/less-than (numeric-value state) (lower-limit state))))))
 
 (defn- recheck-errorness
   [state]
@@ -75,13 +81,11 @@
 
 (defn increase
   [state]
-  (let [new-val (inc (numeric-value state))]
-    (set-input-value state (str new-val))))
+  (set-input-value state (str (money/add (numeric-value state) 1))))
 
 (defn decrease
   [state]
-  (let [new-val (dec (numeric-value state))]
-    (set-input-value state (str new-val))))
+  (set-input-value state (str (money/add (numeric-value state) -1))))
 
 (def ^:private not-digits-or-dot-pattern
   #"[^0-9+\.]")
@@ -130,3 +134,29 @@
 (defn empty-value?
   [state]
   (string/blank? (:value state)))
+
+(defn- fiat->crypto
+  [value conversion-rate]
+  (-> value
+      (money/fiat->crypto conversion-rate)
+      (wallet-utils/cut-crypto-decimals-to-fit-usd-cents conversion-rate)))
+
+(defn- crypto->fiat
+  [value conversion-rate]
+  (-> value
+      (money/crypto->fiat conversion-rate)
+      (wallet-utils/cut-fiat-balance-to-two-decimals)))
+
+(defn ->crypto
+  [state conversion-rate]
+  (-> state
+      (set-input-value (fiat->crypto (input-value state) conversion-rate))
+      (set-upper-limit (fiat->crypto (upper-limit state) conversion-rate))
+      (set-lower-limit (fiat->crypto (lower-limit state) conversion-rate))))
+
+(defn ->fiat
+  [state conversion-rate]
+  (-> state
+      (set-input-value (crypto->fiat (input-value state) conversion-rate))
+      (set-upper-limit (crypto->fiat (upper-limit state) conversion-rate))
+      (set-lower-limit (crypto->fiat (lower-limit state) conversion-rate))))