From e86faa07670977e7329193b1d6b4f4797144ecfc Mon Sep 17 00:00:00 2001 From: Nazarii F Date: Mon, 12 Feb 2024 17:36:23 +0200 Subject: [PATCH] feat(quo): implement wallet - input amount component (#18687) Co-authored-by: Siddarth Kumar Co-authored-by: Jamie Caprani --- resources/images/icons2/20x20/remove@2x.png | Bin 0 -> 181 bytes resources/images/icons2/20x20/remove@3x.png | Bin 0 -> 217 bytes .../wallet/amount_input/component_spec.cljs | 43 ++++++++++ .../wallet/amount_input/schema.cljs | 21 +++++ .../components/wallet/amount_input/style.cljs | 17 ++++ .../components/wallet/amount_input/view.cljs | 81 ++++++++++++++++++ src/quo/core.cljs | 2 + src/quo/core_spec.cljs | 1 + src/status_im/contexts/preview/quo/main.cljs | 3 + .../preview/quo/wallet/amount_input.cljs | 29 +++++++ 10 files changed, 197 insertions(+) create mode 100644 resources/images/icons2/20x20/remove@2x.png create mode 100644 resources/images/icons2/20x20/remove@3x.png create mode 100644 src/quo/components/wallet/amount_input/component_spec.cljs create mode 100644 src/quo/components/wallet/amount_input/schema.cljs create mode 100644 src/quo/components/wallet/amount_input/style.cljs create mode 100644 src/quo/components/wallet/amount_input/view.cljs create mode 100644 src/status_im/contexts/preview/quo/wallet/amount_input.cljs diff --git a/resources/images/icons2/20x20/remove@2x.png b/resources/images/icons2/20x20/remove@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..d869c520ec638f1989ed77625cbedfb9dfab8494 GIT binary patch literal 181 zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU1|)m_?Z^dEoCO|{#S9E$svykh8Km+7D9BhG zY{UYR*hzEAS4Gq|J%)B^+omsdUfSFq>Y%jrBBUc2k<-$yUKyL83! z`O}KeHB8GrpJknzd`f=a + [:catn + [:props + [:map {:closed true} + [:status {:optional true} [:maybe [:enum :default :error]]] + [:theme :schema.common/theme] + [:on-change-text {:optional true} [:maybe fn?]] + [:container-style {:optional true} [:maybe :map]] + [:auto-focus? {:optional true} [:maybe :boolean]] + [:min-value {:optional true} [:maybe :int]] + [:max-value {:optional true} [:maybe :int]] + [:return-key-type {:optional true} [:maybe return-key-types]] + [:init-value {:optional true} [:maybe :int]]]]] + :any]) diff --git a/src/quo/components/wallet/amount_input/style.cljs b/src/quo/components/wallet/amount_input/style.cljs new file mode 100644 index 0000000000..873299c729 --- /dev/null +++ b/src/quo/components/wallet/amount_input/style.cljs @@ -0,0 +1,17 @@ +(ns quo.components.wallet.amount-input.style + (:require + [quo.foundations.colors :as colors])) + +(def container + {:flex-direction :row + :justify-content :center + :align-items :center}) + +(def input-container {:flex 1}) + +(defn input-text + [theme type] + {:padding 0 + :color (if (= type :error) + (colors/resolve-color :danger theme) + (colors/theme-colors colors/neutral-100 colors/white theme))}) diff --git a/src/quo/components/wallet/amount_input/view.cljs b/src/quo/components/wallet/amount_input/view.cljs new file mode 100644 index 0000000000..2d21862bbf --- /dev/null +++ b/src/quo/components/wallet/amount_input/view.cljs @@ -0,0 +1,81 @@ +(ns quo.components.wallet.amount-input.view + (:require + [quo.components.buttons.button.view :as button] + [quo.components.markdown.text :as text] + [quo.components.wallet.amount-input.schema :as amount-input.schema] + [quo.components.wallet.amount-input.style :as style] + [quo.theme :as quo.theme] + [react-native.core :as rn] + [reagent.core :as reagent] + [schema.core :as schema])) + +(defn- amount-button + [{:keys [theme accessibility-label disabled? icon on-press]}] + [button/button + {:icon-only? true + :theme theme + :disabled? disabled? + :type :outline + :accessibility-label accessibility-label + :size 32 + :on-press on-press} + icon]) + +(defn- process-amount + [input-value min-value max-value] + (let [parsed-input-value (parse-double input-value)] + (cond + (nil? parsed-input-value) min-value + (>= input-value max-value) max-value + (<= input-value min-value) min-value + :else parsed-input-value))) + +(defn- view-internal + [{:keys [init-value]}] + (let [init-value (or init-value 0) + value (reagent/atom init-value) + on-dec-press #(swap! value dec) + on-inc-press #(swap! value inc)] + (fn [{:keys [theme status min-value max-value auto-focus? + return-key-type container-style on-change-text]}] + (let [min-value (or min-value 0) + max-value (or max-value 999999999)] + [rn/view + {:style (merge style/container container-style)} + [amount-button + {:theme theme + :accessibility-label :amount-input-dec-button + :icon :i/remove + :on-press on-dec-press + :disabled? (>= min-value @value)}] + [rn/view {:style style/input-container} + [rn/text-input + {:style + (text/text-style + {:size :heading-1 + :weight :semi-bold + :align :center + :style (style/input-text theme (or status :default))}) + :accessibility-label :amount-input + :editable true + :auto-focus (or auto-focus? false) + :value (str @value) + :keyboard-appearance (quo.theme/theme-value :light :dark theme) + :return-key-type (or return-key-type :done) + :input-mode :numeric + :on-change-text (fn [input-value] + (let [processed-amount (process-amount input-value min-value max-value)] + (reset! value processed-amount) + (when on-change-text + (on-change-text processed-amount)) + (reagent/flush)))}]] ; Fixes the input flickering issue when typing. + [amount-button + {:theme theme + :icon :i/add + :accessibility-label :amount-input-inc-button + :on-press on-inc-press + :disabled? (>= @value max-value)}]])))) + +(def view + (quo.theme/with-theme + (schema/instrument #'view-internal amount-input.schema/?schema))) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index c0a5286065..32fa837af6 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -157,6 +157,7 @@ quo.components.wallet.account-overview.view quo.components.wallet.account-permissions.view quo.components.wallet.address-text.view + quo.components.wallet.amount-input.view quo.components.wallet.confirmation-progress.view quo.components.wallet.keypair.view quo.components.wallet.network-amount.view @@ -416,6 +417,7 @@ (def account-overview quo.components.wallet.account-overview.view/view) (def account-permissions quo.components.wallet.account-permissions.view/view) (def address-text quo.components.wallet.address-text.view/view) +(def amount-input quo.components.wallet.amount-input.view/view) (def confirmation-propgress quo.components.wallet.confirmation-progress.view/view) (def keypair quo.components.wallet.keypair.view/view) (def network-amount quo.components.wallet.network-amount.view/view) diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs index f6a46054c7..f4d9fc0d93 100644 --- a/src/quo/core_spec.cljs +++ b/src/quo/core_spec.cljs @@ -90,6 +90,7 @@ quo.components.wallet.account-origin.component-spec quo.components.wallet.account-overview.component-spec quo.components.wallet.account-permissions.component-spec + quo.components.wallet.amount-input.component-spec quo.components.wallet.confirmation-progress.component-spec quo.components.wallet.keypair.component-spec quo.components.wallet.network-amount.component-spec diff --git a/src/status_im/contexts/preview/quo/main.cljs b/src/status_im/contexts/preview/quo/main.cljs index d79cb88f40..2389a2197a 100644 --- a/src/status_im/contexts/preview/quo/main.cljs +++ b/src/status_im/contexts/preview/quo/main.cljs @@ -179,6 +179,7 @@ [status-im.contexts.preview.quo.wallet.account-overview :as account-overview] [status-im.contexts.preview.quo.wallet.account-permissions :as account-permissions] + [status-im.contexts.preview.quo.wallet.amount-input :as amount-input] [status-im.contexts.preview.quo.wallet.confirmation-progress :as confirmation-progress] [status-im.contexts.preview.quo.wallet.keypair :as keypair] @@ -496,6 +497,8 @@ :component account-overview/view} {:name :account-permissions :component account-permissions/view} + {:name :amount-input + :component amount-input/view} {:name :confirmation-progress :component confirmation-progress/view} {:name :keypair :component keypair/view} diff --git a/src/status_im/contexts/preview/quo/wallet/amount_input.cljs b/src/status_im/contexts/preview/quo/wallet/amount_input.cljs new file mode 100644 index 0000000000..6e94d96845 --- /dev/null +++ b/src/status_im/contexts/preview/quo/wallet/amount_input.cljs @@ -0,0 +1,29 @@ +(ns status-im.contexts.preview.quo.wallet.amount-input + (:require + [quo.core :as quo] + [reagent.core :as reagent] + [status-im.contexts.preview.quo.preview :as preview])) + +(def descriptor + [{:key :max-value + :type :number} + {:key :min-value + :type :number} + {:key :init-value + :type :number} + {:type :select + :key :status + :options [{:key :default} + {:key :error}]}]) + +(defn view + [] + (let [state (reagent/atom {:max-value 10000 + :min-value 0 + :init-value 1 + :status :default})] + (fn [] + [preview/preview-container + {:state state + :descriptor descriptor} + [quo/amount-input @state]])))