WIP: first attempt

Numbered keyboard sane defaults

Top bar

Use input

Progress

Update token-input

Update keyboard

Base specs

Backspace icon

Revert "Backspace icon"

This reverts commit e591c5297ae149eb3800df853b956d3154fe206c.

Update tests

Clean up

Fix formatting

Fix styles

Add autofocus

Add icons and update tests

Add comment

Add on-swap

Current limit state

Update tests

Update column key

Improve input interaction

Extract make-new-input

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

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

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

@@ -60,7 +60,7 @@
         :theme     theme}]
       (if delete-key?
         [keyboard-item
-         {:item      :i/delete
+         {:item      :i/travel
           :type      :key
           :disabled? disabled?
           :on-press  on-delete

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

@@ -14,7 +14,10 @@
    :padding-bottom     4
    :height             36
    :flex-direction     :row
-   :justify-content    :space-between})
+   :justify-content    :space-between
+   ;;
+   :background-color   :pink
+   })
 
 (def token
   {:width  32
@@ -22,14 +25,12 @@
 
 (defn text-input
   [theme]
-  (merge typography/heading-1
-         {:font-weight  "600"
-          :margin-left  8
-          :margin-right (if platform/ios? 6 4)
-          :color        (colors/theme-colors colors/neutral-100 colors/white theme)
-          :padding      0
-          :text-align   :center
-          :height       "100%"}))
+  (assoc typography/heading-1
+    :font-weight "600"
+    :color (colors/theme-colors colors/neutral-100 colors/white theme)
+    :padding 0
+    ;; TODO: fix the padding
+    :height "100%"))
 
 (defn divider
   [width theme]

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

@@ -8,9 +8,11 @@
    [quo.components.wallet.token-input.style :as style]
    [quo.foundations.colors :as colors]
    [quo.foundations.common :as common]
+   [oops.core :as oops]
    [quo.foundations.resources :as resources]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
+   [react-native.platform :as platform]
    [reagent.core :as reagent]))
 
 (defn calc-value
@@ -30,59 +32,76 @@
                           on-swap container-style show-keyboard?]
           :or            {show-keyboard? true}
           external-value :value}]
-      [rn/view
-       {:style (merge
-                (style/main-container width)
-                container-style)}
-       [rn/view {:style style/amount-container}
-        [rn/pressable
-         {:on-press #(when @input-ref (.focus ^js @input-ref))
-          :style    {:flex-direction :row
-                     :flex-grow      1
-                     :align-items    :flex-end}}
-         [rn/image
-          {:style  style/token
-           :source (resources/get-token token)}]
-         [rn/text-input
-          {:ref                      #(do (reset! input-ref %)
-                                          (when %
-                                            (.focus ^js %)))
-           :placeholder              "0"
-           :placeholder-text-color   (colors/theme-colors colors/neutral-40
-                                                          colors/neutral-50
-                                                          theme)
-           :default-value            (or external-value @value)
-           :keyboard-type            :numeric
-           :max-length               12
-           :on-change-text           #(reset! value %)
-           :style                    (style/text-input theme)
-           :selection-color          customization-color
-           :show-soft-input-on-focus show-keyboard?}]]
-        [text/text
-         {:size   :paragraph-2
-          :weight :semi-bold
-          :style  {:color          (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-                   :margin-right   8
-                   :padding-bottom 2}}
-         (string/upper-case (or (clj->js (if @crypto? token currency)) ""))]]
-       [button/button
-        {:icon                true
-         :icon-only?          true
-         :size                32
-         :on-press            (fn []
-                                (swap! crypto? not)
-                                (when on-swap
-                                  (on-swap @crypto?)))
-         :type                :outline
-         :accessibility-label :reorder}
-        :i/reorder]
-       [divider-line/view {:container-style {:margin-vertical 8}}]
-       [rn/view {:style style/data-container}
-        [network-tag/view {:networks networks :title title}]
-        [text/text
-         {:size   :paragraph-2
-          :weight :medium
-          :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-         (calc-value @crypto? currency token (or external-value @value) conversion)]]])))
+      (let [number-of-chars    (count (or external-value @value))
+            text-unit-position (+ 23
+                                  (* (if (<= number-of-chars 1)
+                                       0
+                                       (- number-of-chars 1))
+                                     15.333))]
+        [rn/view
+         {:style (merge
+                  (style/main-container width)
+                  container-style)}
+         [rn/view {:style style/amount-container}
+          [rn/pressable
+           {:on-press #(when @input-ref (.focus ^js @input-ref))
+            :style    {:flex             1
+                       :background-color :orange
+                       }}
+           [rn/image
+            {:style  style/token
+             :source (resources/get-token token)}]
+
+
+           [rn/view {:style {:background-color :lightblue
+                             ;;
+                             :position         :absolute
+                             :top              0
+                             :bottom           0
+                             :left             40
+                             :right            0
+                             }}
+            [rn/text-input
+             {:ref                      #(reset! input-ref %)
+              :auto-focus               true
+              :placeholder              "0"
+              :placeholder-text-color   (colors/theme-colors colors/neutral-40
+                                                             colors/neutral-50
+                                                             theme)
+              :default-value            (or external-value @value)
+              :keyboard-type            :numeric
+              :max-length               12
+              :on-change-text           #(reset! value %)
+              :style                    (style/text-input theme)
+              :selection-color          customization-color
+              :show-soft-input-on-focus show-keyboard?}]
+            ;;
+            [rn/view {:style {:position :absolute
+                              :bottom   1
+                              :left     text-unit-position}}
+             [text/text
+              {:size   :paragraph-2
+               :weight :semi-bold
+               :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+              (string/upper-case (or (clj->js (if @crypto? token currency)) ""))]]]]
+          [button/button
+           {:icon                true
+            :icon-only?          true
+            :size                32
+            :on-press            (fn []
+                                   (swap! crypto? not)
+                                   (when on-swap
+                                     (on-swap @crypto?)))
+            :type                :outline
+            :accessibility-label :reorder}
+           :i/reorder]]
+         [divider-line/view {:container-style {:margin-vertical 8}}]
+         [rn/view {:style style/data-container}
+          [network-tag/view {:networks networks :title title}]
+          [text/text
+           {:size   :paragraph-2
+            :weight :medium
+            :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+           (calc-value @crypto? currency token (or external-value @value) conversion)]]]))))
 
 (def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/home/view.cljs

@@ -30,7 +30,9 @@
 (defn- new-account-card-data
   []
   {:customization-color (rf/sub [:profile/customization-color])
-   :on-press            #(rf/dispatch [:show-bottom-sheet {:content new-account}])
+   :on-press            #(rf/dispatch [:navigate-to :wallet-send-input-amount
+                                       ] ;[:show-bottom-sheet {:content new-account}]
+                                      )
    :type                :add-account})
 
 (def tabs-data

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

@@ -0,0 +1,80 @@
+(ns status-im2.contexts.wallet.send.input-amount.component-spec
+  (:require
+    [re-frame.core :as re-frame]
+    [status-im2.contexts.wallet.send.input-amount.view :as input-amount]
+    [test-helpers.component :as h]))
+
+(defn setup-subs
+  [subscriptions]
+  (doseq [keyval subscriptions]
+    (re-frame/reg-sub
+     (key keyval)
+     (fn [_] (val keyval)))))
+
+(def sub-mocks
+  {:profile/profile        {:currency :usd}
+   :wallet/network-details [{:source           525
+                             :short-name       "eth"
+                             :network-name     :ethereum
+                             :chain-id         1
+                             :related-chain-id 5}]})
+
+(h/describe "Send > input amount screen"
+  (h/test "Default render"
+    (setup-subs sub-mocks)
+    (h/render [input-amount/view {}])
+    (h/is-truthy (h/get-by-text "0"))
+    (h/is-truthy (h/get-by-text "ETH"))
+    (h/is-truthy (h/get-by-text "$0.00"))
+    (h/is-disabled (h/get-by-label-text :button-one)))
+
+  (h/test "Fill token input and confirm"
+    (setup-subs sub-mocks)
+    (let [on-confirm (h/mock-fn)]
+      (h/render [input-amount/view {:on-confirm on-confirm}])
+      (h/fire-event :press (h/query-by-label-text :keyboard-key-1))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key-2))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key-3))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key-.))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key-4))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key-5))
+
+      (h/wait-for #(h/is-truthy (h/get-by-text "$1234.50")))
+
+      (h/is-truthy (h/get-by-label-text :button-one))
+
+      (h/fire-event :press (h/get-by-label-text :button-one))
+      (h/was-called on-confirm)))
+
+  (h/test "Try to fill more than limit"
+    (setup-subs sub-mocks)
+    (h/render [input-amount/view {}])
+    (h/fire-event :press (h/query-by-label-text :keyboard-key-2))
+    (h/fire-event :press (h/query-by-label-text :keyboard-key-9))
+    (h/fire-event :press (h/query-by-label-text :keyboard-key-5))
+
+    (h/wait-for #(h/is-truthy (h/get-by-text "$290.00")))
+
+    (h/fire-event :press (h/query-by-label-text :keyboard-key-backspace))
+    (h/fire-event :press (h/query-by-label-text :keyboard-key-8))
+    (h/fire-event :press (h/query-by-label-text :keyboard-key-5))
+    (h/wait-for #(h/is-truthy (h/get-by-text "$2850.00"))))
+
+  (h/test "Switch from crypto to fiat and check limit"
+    (setup-subs sub-mocks)
+    (h/render [input-amount/view {}])
+
+    (h/fire-event :press (h/query-by-label-text :keyboard-key-2))
+    (h/fire-event :press (h/query-by-label-text :keyboard-key-0))
+    (h/wait-for #(h/is-truthy (h/get-by-text "$200.00")))
+
+    (h/fire-event :press (h/query-by-label-text :reorder))
+
+    (h/wait-for #(h/is-truthy (h/get-by-text "2.00 ETH")))
+
+    (h/fire-event :press (h/query-by-label-text :keyboard-key-5))
+    (h/fire-event :press (h/query-by-label-text :keyboard-key-5))
+
+    (h/wait-for #(h/is-truthy (h/get-by-text "205.50 ETH")))
+    (h/fire-event :press (h/query-by-label-text :keyboard-key-5))
+    (h/wait-for #(h/is-truthy (h/get-by-text "205.50 ETH")))))

src/status_im2/contexts/wallet/send/input_amount/view.cljs

@@ -1,13 +1,13 @@
 (ns status-im2.contexts.wallet.send.input-amount.view
   (:require
-   [clojure.string :as string]
-   [quo.core :as quo]
-   [quo.theme :as quo.theme]
-   [react-native.core :as rn]
-   [reagent.core :as reagent]
-   [status-im2.contexts.wallet.send.input-amount.style :as style]
-   [utils.i18n :as i18n]
-   [utils.re-frame :as rf]))
+    [clojure.string :as string]
+    [quo.core :as quo]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [status-im2.contexts.wallet.send.input-amount.style :as style]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
 
 (defn- make-limit-label
   [{:keys [amount currency]}]
@@ -32,7 +32,7 @@
         {:keys [currency]}    (rf/sub [:profile/profile])
         networks              (rf/sub [:wallet/network-details])
         conversion-rate       10
-        limit-crypto          286.32
+        limit-crypto          100000000
         limit-fiat            (* limit-crypto conversion-rate)
         input-value           (reagent/atom "")
         current-limit         (reagent/atom {:amount   limit-crypto

src/status_im2/core_spec.cljs

@@ -4,4 +4,5 @@
     [status-im2.contexts.chat.messages.content.audio.component-spec]
     [status-im2.contexts.communities.actions.community-options.component-spec]
     [status-im2.contexts.wallet.add-address-to-watch.component-spec]
-    [status-im2.contexts.wallet.create-account.edit-derivation-path.component-spec]))
+    [status-im2.contexts.wallet.create-account.edit-derivation-path.component-spec]
+    [status-im2.contexts.wallet.send.input-amount.component-spec]))