diff --git a/resources/images/tokens/mainnet/SNT@2x.png b/resources/images/tokens/mainnet/SNT@2x.png index 817a08849f..ffa49bb1dd 100644 Binary files a/resources/images/tokens/mainnet/SNT@2x.png and b/resources/images/tokens/mainnet/SNT@2x.png differ diff --git a/resources/images/tokens/mainnet/SNT@3x.png b/resources/images/tokens/mainnet/SNT@3x.png index 2898c4f393..7037af0441 100644 Binary files a/resources/images/tokens/mainnet/SNT@3x.png and b/resources/images/tokens/mainnet/SNT@3x.png differ diff --git a/src/quo2/components/wallet/token_input/component_spec.cljs b/src/quo2/components/wallet/token_input/component_spec.cljs new file mode 100644 index 0000000000..9516fb1927 --- /dev/null +++ b/src/quo2/components/wallet/token_input/component_spec.cljs @@ -0,0 +1,18 @@ +(ns quo2.components.wallet.token-input.component-spec + (:require [test-helpers.component :as h] + [quo2.components.wallet.token-input.view :as token-input])) + +(h/describe "Wallet: Token Input" + (h/test "Token label renders" + (h/render [token-input/view + {:token :snt + :currency :eur + :conversion 1}]) + (h/is-truthy (h/get-by-text "SNT"))) + + (h/test "Amount renders" + (h/render [token-input/view + {:token :snt + :currency :eur + :conversion 1}]) + (h/is-truthy (h/get-by-text "€0.00")))) diff --git a/src/quo2/components/wallet/token_input/style.cljs b/src/quo2/components/wallet/token_input/style.cljs new file mode 100644 index 0000000000..52f7a60e8e --- /dev/null +++ b/src/quo2/components/wallet/token_input/style.cljs @@ -0,0 +1,44 @@ +(ns quo2.components.wallet.token-input.style + (:require + [quo2.foundations.colors :as colors] + [react-native.platform :as platform] + [quo2.foundations.typography :as typography])) + +(defn main-container + [width] + {:padding-vertical 8 + :width width}) + +(def amount-container + {:padding-horizontal 20 + :padding-bottom 4 + :height 36 + :flex-direction :row + :justify-content :space-between}) + +(def token + {:width 32 + :height 32}) + +(def text-input + (merge typography/heading-1 + {:font-weight "600" + :margin-left 4 + :margin-right (if platform/ios? 6 4) + :padding 0 + :text-align :center + :height "100%"})) + +(defn divider + [width theme] + {:height 1 + :width width + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme) + :margin-vertical 8}) + +(def data-container + {:padding-top 4 + :padding-horizontal 20 + :height 28 + :flex-direction :row + :justify-content :space-between}) diff --git a/src/quo2/components/wallet/token_input/view.cljs b/src/quo2/components/wallet/token_input/view.cljs new file mode 100644 index 0000000000..17d10b0a40 --- /dev/null +++ b/src/quo2/components/wallet/token_input/view.cljs @@ -0,0 +1,67 @@ +(ns quo2.components.wallet.token-input.view + (:require + [clojure.string :as string] + [quo2.components.buttons.button.view :as button] + [quo2.components.markdown.text :as text] + [quo2.foundations.colors :as colors] + [quo2.foundations.resources :as resources] + [quo2.theme :as quo.theme] + [react-native.core :as rn] + [reagent.core :as reagent] + [quo2.foundations.common :as common] + [quo2.components.wallet.token-input.style :as style])) + +(defn calc-value + [crypto? currency token value conversion] + (if crypto? + (str (get common/currency-label currency) (.toFixed (* value conversion) 2)) + (str (.toFixed (/ value conversion) 2) " " (string/upper-case (clj->js token))))) + +(defn- view-internal + [] + (let [width (:width (rn/get-window)) + value (reagent/atom 0) + crypto? (reagent/atom true) + input-ref (atom nil)] + (fn [{:keys [theme token currency conversion]}] + [rn/view {:style (style/main-container width)} + [rn/view {:style style/amount-container} + [rn/pressable + {:on-press #(.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 #(when @input-ref (reset! input-ref %)) + :placeholder "0" + :placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) + :keyboard-type :numeric + :max-length 12 + :default-value @value + :on-change-text #(reset! value %) + :style style/text-input}] + [text/text + {:size :paragraph-2 + :weight :semi-bold + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + (string/upper-case (clj->js (if @crypto? token currency)))]] + [button/button + {:icon true + :size 32 + :on-press #(swap! crypto? not) + :type :outline + :accessibility-label :reorder} + :i/reorder]] + [rn/view {:style (style/divider width theme)}] + [rn/view {:style style/data-container} + [text/text "[WIP] NETWORK TAG"] + [text/text + {:size :paragraph-2 + :weight :medium + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + (calc-value @crypto? currency token @value conversion)]]]))) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 2d1e6df19a..c86a3a0eaa 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -105,7 +105,8 @@ quo2.components.text-combinations.title.view quo2.components.wallet.network-amount.view quo2.components.wallet.network-bridge.view - quo2.components.wallet.account-card.view)) + quo2.components.wallet.account-card.view + quo2.components.wallet.token-input.view)) (def separator quo2.components.common.separator.view/separator) @@ -294,6 +295,7 @@ (def url-preview-list quo2.components.links.url-preview-list.view/view) (def link-preview quo2.components.links.link-preview.view/view) + ;;;; GRADIENT (def gradient-cover quo2.components.gradient.gradient-cover.view/view) @@ -301,3 +303,5 @@ (def network-amount quo2.components.wallet.network-amount.view/view) (def network-bridge quo2.components.wallet.network-bridge.view/view) (def account-card quo2.components.wallet.account-card.view/view) +(def token-input quo2.components.wallet.token-input.view/view) + diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index e8f7597f36..c86dc735e7 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -51,4 +51,5 @@ [quo2.components.tags.status-tags-component-spec] [quo2.components.wallet.network-amount.component-spec] [quo2.components.wallet.network-bridge.component-spec] - [quo2.components.wallet.account-card.component-spec])) + [quo2.components.wallet.account-card.component-spec] + [quo2.components.wallet.token-input.component-spec])) diff --git a/src/quo2/foundations/common.cljs b/src/quo2/foundations/common.cljs new file mode 100644 index 0000000000..2ec1f7ad96 --- /dev/null +++ b/src/quo2/foundations/common.cljs @@ -0,0 +1,5 @@ +(ns quo2.foundations.common) + +(def currency-label + {:eur "€" + :usd "$"}) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 8c6ce99bab..ad7b644fa3 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -105,7 +105,8 @@ [status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover] [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount] [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge] - [status-im2.contexts.quo-preview.wallet.account-card :as account-card])) + [status-im2.contexts.quo-preview.wallet.account-card :as account-card] + [status-im2.contexts.quo-preview.wallet.token-input :as token-input])) (def screens-categories {:foundations [{:name :shadows @@ -408,7 +409,10 @@ :component network-amount/preview} {:name :network-bridge :options {:topBar {:visible true}} - :component network-bridge/preview}] + :component network-bridge/preview} + {:name :token-input + :options {:topBar {:visible true}} + :component token-input/preview}] :keycard [{:name :keycard-component :options {:topBar {:visible true}} :component keycard/preview-keycard}]}) diff --git a/src/status_im2/contexts/quo_preview/wallet/token_input.cljs b/src/status_im2/contexts/quo_preview/wallet/token_input.cljs new file mode 100644 index 0000000000..13827b803b --- /dev/null +++ b/src/status_im2/contexts/quo_preview/wallet/token_input.cljs @@ -0,0 +1,38 @@ +(ns status-im2.contexts.quo-preview.wallet.token-input + (:require + [quo2.core :as quo] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def descriptor + [{:label "Token:" + :key :token + :type :select + :options [{:key :eth + :value "ETH"} + {:key :snt + :value "SNT"}]} + {:label "Currency:" + :key :currency + :type :select + :options [{:key :usd + :value "USD"} + {:key :eur + :value "EUR"}]}]) + +(defn preview + [] + (let [state (reagent/atom {:token :eth + :currency :usd + :conversion 0.02})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view + {:style {:flex 1 + :padding-horizontal 20}} + [rn/view {:style {:min-height 150}} [preview/customizer state descriptor]] + [rn/view + {:style {:flex 1 + :margin-top 50 + :align-items :center}} [quo/token-input @state]]]])))