diff --git a/src/quo2/components/list_items/token_value/component_spec.cljs b/src/quo2/components/list_items/token_value/component_spec.cljs new file mode 100644 index 0000000000..2ad7d5328d --- /dev/null +++ b/src/quo2/components/list_items/token_value/component_spec.cljs @@ -0,0 +1,60 @@ +(ns quo2.components.list-items.token-value.component-spec + (:require + [quo2.foundations.colors :as colors] + [test-helpers.component :as h] + [quo2.components.list-items.token-value.view :as token-value])) + +(h/describe "List Items: Token Value" + (h/test "Token label renders" + (h/render [token-value/view + {:token :snt + :state :default + :status :empty + :customization-color :blue + :metrics? true + :values {:crypto-value "0.00" + :fiat-value "€0.00" + :percentage-change "0.00" + :fiat-change "€0.00"}}]) + (h/is-truthy (h/get-by-text "Status"))) + + (h/test "Pressed state" + (h/render [token-value/view + {:token :snt + :state :pressed + :status :empty + :customization-color :blue + :metrics? true + :values {:crypto-value "0.00" + :fiat-value "€0.00" + :percentage-change "0.00" + :fiat-change "€0.00"}}]) + (h/has-style (h/get-by-label-text :container) + {:backgroundColor (colors/custom-color-by-theme :blue 50 50 5 5)})) + + (h/test "Active state" + (h/render [token-value/view + {:token :snt + :state :active + :status :empty + :customization-color :blue + :metrics? true + :values {:crypto-value "0.00" + :fiat-value "€0.00" + :percentage-change "0.00" + :fiat-change "€0.00"}}]) + (h/has-style (h/get-by-label-text :container) + {:backgroundColor (colors/custom-color-by-theme :blue 50 50 10 10)})) + + (h/test "Status change" + (h/render [token-value/view + {:token :snt + :state :default + :status :positive + :customization-color :blue + :metrics? true + :values {:crypto-value "0.00" + :fiat-value "€0.00" + :percentage-change "0.00" + :fiat-change "€0.00"}}]) + (h/is-truthy (h/get-by-label-text :arrow-icon)))) diff --git a/src/quo2/components/list_items/token_value/style.cljs b/src/quo2/components/list_items/token_value/style.cljs new file mode 100644 index 0000000000..745b546a8a --- /dev/null +++ b/src/quo2/components/list_items/token_value/style.cljs @@ -0,0 +1,42 @@ +(ns quo2.components.list-items.token-value.style + (:require [quo2.foundations.colors :as colors])) + +(defn container + [color bg-opacity theme] + {:width 359 + :height 56 + :padding-horizontal 12 + :padding-vertical 8 + :border-radius 12 + :flex-direction :row + :justify-content :space-between + :background-color (colors/custom-color-by-theme color 50 50 bg-opacity bg-opacity theme)}) + +(defn metric-text + [status theme] + {:color (case status + :positive (colors/theme-colors colors/success-50 colors/success-60 theme) + :negative (colors/theme-colors colors/danger-50 colors/danger-60 theme) + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}) + +(defn dot-divider + [status theme] + {:width 2 + :height 2 + :border-radius 2 + :margin-horizontal 4 + :background-color (case status + :positive (colors/theme-colors colors/success-50-opa-40 + colors/success-60-opa-40 + theme) + :negative (colors/theme-colors colors/danger-50-opa-40 + colors/danger-50-opa-40 + theme) + (colors/theme-colors colors/neutral-80-opa-40 colors/neutral-50-opa-40 theme))}) + +(defn arrow-icon + [status theme] + {:size 16 + :color (if (= status :positive) + (colors/theme-colors colors/success-50 colors/success-60 theme) + (colors/theme-colors colors/danger-50 colors/danger-60 theme))}) diff --git a/src/quo2/components/list_items/token_value/view.cljs b/src/quo2/components/list_items/token_value/view.cljs new file mode 100644 index 0000000000..8f790bf814 --- /dev/null +++ b/src/quo2/components/list_items/token_value/view.cljs @@ -0,0 +1,60 @@ +(ns quo2.components.list-items.token-value.view + (:require + [clojure.string :as string] + [quo2.components.icon :as icon] + [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] + [quo2.foundations.common :as common] + [quo2.components.list-items.token-value.style :as style])) + +(defn- internal-view + [{:keys [theme customization-color state status token metrics? values]}] + (let [bg-opacity (case state + :active 10 + :pressed 5 + 0) + {:keys [crypto-value fiat-value percentage-change fiat-change]} values] + [rn/view + {:style (style/container customization-color bg-opacity theme) + :accessibility-label :container} + [rn/view + {:style {:flex-direction :row + :align-items :center}} + [rn/image + {:source (resources/tokens token) + :style {:width 32 + :height 32}}] + [rn/view {:style {:margin-left 8}} + [text/text {:weight :semi-bold} (common/token-label token)] + [text/text + {:size :paragraph-2 + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + (str crypto-value " " (string/upper-case (clj->js token)))]]] + [rn/view + {:style {:align-items :flex-end + :justify-content :space-between}} + [text/text + {:weight :medium + :size :paragraph-2} fiat-value] + (when metrics? + [rn/view + {:style {:flex-direction :row + :align-items :center}} + [text/text + {:size :paragraph-2 + :style (style/metric-text status theme)} (str percentage-change "%")] + [rn/view {:style (style/dot-divider status theme)}] + [text/text + {:size :paragraph-2 + :style (style/metric-text status theme)} fiat-change] + (when (not= status :empty) + [rn/view + {:style {:margin-left 4} + :accessibility-label :arrow-icon} + [icon/icon (if (= status :positive) :i/positive :i/negative) + (style/arrow-icon status theme)]])])]])) + +(def view (quo.theme/with-theme internal-view)) diff --git a/src/quo2/components/wallet/token_input/view.cljs b/src/quo2/components/wallet/token_input/view.cljs index 17d10b0a40..b90c0617a5 100644 --- a/src/quo2/components/wallet/token_input/view.cljs +++ b/src/quo2/components/wallet/token_input/view.cljs @@ -27,7 +27,7 @@ [rn/view {:style (style/main-container width)} [rn/view {:style style/amount-container} [rn/pressable - {:on-press #(.focus ^js @input-ref) + {:on-press #(when @input-ref (.focus ^js @input-ref)) :style {:flex-direction :row :flex-grow 1 :align-items :flex-end}} @@ -35,7 +35,7 @@ {:style style/token :source (resources/get-token token)}] [rn/text-input - {:ref #(when @input-ref (reset! input-ref %)) + {:ref #(reset! input-ref %) :placeholder "0" :placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) :keyboard-type :numeric diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 3b29bf1160..54523ee968 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -57,6 +57,7 @@ quo2.components.list-items.community.view quo2.components.list-items.menu-item quo2.components.list-items.preview-list + quo2.components.list-items.token-value.view quo2.components.list-items.user-list quo2.components.loaders.skeleton quo2.components.loaders.skeleton.view @@ -211,6 +212,7 @@ (def preview-list quo2.components.list-items.preview-list/preview-list) (def user-list quo2.components.list-items.user-list/user-list) (def community-list-item quo2.components.list-items.community.view/view) +(def token-value quo2.components.list-items.token-value.view/view) ;;;; LOADERS (def skeleton quo2.components.loaders.skeleton/skeleton) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index f3d5dd21cc..88535673ee 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -31,6 +31,7 @@ [quo2.components.links.url-preview-list.component-spec] [quo2.components.links.url-preview.component-spec] [quo2.components.list-items.community.component-spec] + [quo2.components.list-items.token-value.component-spec] [quo2.components.markdown.text-component-spec] [quo2.components.markdown.list.component-spec] [quo2.components.notifications.notification.component-spec] diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index f79ff96405..bf96c3eea3 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -58,6 +58,8 @@ (def neutral-95 "#0D1625") (def neutral-100 "#09101C") +(def neutral-50-opa-40 (alpha neutral-50 0.4)) + ;;80 with transparency (def neutral-80-opa-5 (alpha neutral-80 0.05)) (def neutral-80-opa-10 (alpha neutral-80 0.1)) diff --git a/src/quo2/foundations/common.cljs b/src/quo2/foundations/common.cljs index 2ec1f7ad96..a7cd8850f2 100644 --- a/src/quo2/foundations/common.cljs +++ b/src/quo2/foundations/common.cljs @@ -3,3 +3,7 @@ (def currency-label {:eur "€" :usd "$"}) + +(def token-label + {:eth "Ethereum" + :snt "Status"}) diff --git a/src/status_im2/contexts/quo_preview/list_items/token_value.cljs b/src/status_im2/contexts/quo_preview/list_items/token_value.cljs new file mode 100644 index 0000000000..632539e10d --- /dev/null +++ b/src/status_im2/contexts/quo_preview/list_items/token_value.cljs @@ -0,0 +1,57 @@ +(ns status-im2.contexts.quo-preview.list-items.token-value + (: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 "State:" + :key :state + :type :select + :options [{:key :default + :value "Default"} + {:key :pressed + :value "Pressed"} + {:key :active + :value "Active"}]} + {:label "Status:" + :key :status + :type :select + :options [{:key :empty + :value "Empty"} + {:key :positive + :value "Positive"} + {:key :negative + :value "Negative"}]} + (preview/customization-color-option) + {:label "Metrics?:" + :key :metrics? + :type :boolean}]) + +(defn preview + [] + (let [state (reagent/atom {:token :snt + :state :default + :status :empty + :customization-color :blue + :metrics? true + :values {:crypto-value "0.00" + :fiat-value "€0.00" + :percentage-change "0.00" + :fiat-change "€0.00"}})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view + {:style {:flex 1}} + [rn/view {:style {:min-height 300}} [preview/customizer state descriptor]] + [rn/view + {:style {:align-items :center + :margin-top 50}} [quo/token-value @state]]]]))) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index c1cd989ee8..67478cfbaa 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -58,6 +58,7 @@ [status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists] [status-im2.contexts.quo-preview.list-items.user-list :as user-list] [status-im2.contexts.quo-preview.list-items.community-list :as community-list] + [status-im2.contexts.quo-preview.list-items.token-value :as token-value] [status-im2.contexts.quo-preview.markdown.text :as text] [status-im2.contexts.quo-preview.markdown.list :as markdown-list] [status-im2.contexts.quo-preview.messages.author :as messages-author] @@ -276,7 +277,10 @@ :component preview-lists/preview-preview-lists} {:name :user-list :options {:topBar {:visible true}} - :component user-list/preview-user-list}] + :component user-list/preview-user-list} + {:name :token-value + :options {:topBar {:visible true}} + :component token-value/preview}] :loaders [{:name :skeleton :options {:topBar {:visible true}} :component skeleton/preview-skeleton}]