Quo2 Wallet: Token Value (#16880)

* feat: quo2 wallet - Token Value

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))))

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))})

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))

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

@@ -27,15 +27,15 @@
       [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}}
          [rn/image
           {: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

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)

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]

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))

src/quo2/foundations/common.cljs

@@ -3,3 +3,7 @@
 (def currency-label
   {:eur "€"
    :usd "$"})
+
+(def token-label
+  {:eth "Ethereum"
+   :snt "Status"})

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]]]])))

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}]