status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Quo2 Wallet: Token Value (#16880) 

* feat: quo2 wallet - Token Value
This commit is contained in:
Omar Basem 2023-08-07 10:34:54 +04:00 committed by GitHub
parent 2819c20400
commit 5b495927ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 235 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/quo2/components/list_items/token_value/component_spec.cljs Normal file
View File

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

42
src/quo2/components/list_items/token_value/style.cljs Normal file
View File

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

60
src/quo2/components/list_items/token_value/view.cljs Normal file
View File

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

4
src/quo2/components/wallet/token_input/view.cljs
View File

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

2
src/quo2/core.cljs
View File

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

1
src/quo2/core_spec.cljs
View File

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

2
src/quo2/foundations/colors.cljs
View File

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

4
src/quo2/foundations/common.cljs
View File

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

57
src/status_im2/contexts/quo_preview/list_items/token_value.cljs Normal file
View File

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

6
src/status_im2/contexts/quo_preview/main.cljs
View File

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