Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Quo2 Wallet: Token Value #16880

Merged
merged 17 commits into from
Aug 7, 2023
Merged

Quo2 Wallet: Token Value #16880

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
c7f3be5
feat: quo2 token value
OmarBasem Aug 2, 2023
a35319c
feat: quo2 token value
OmarBasem Aug 4, 2023
9c75a79
add test
OmarBasem Aug 4, 2023
2382429
lint
OmarBasem Aug 4, 2023
3397471
review
OmarBasem Aug 4, 2023
c666b02
fix color
OmarBasem Aug 4, 2023
08690f0
review
OmarBasem Aug 4, 2023
d227e59
lint
OmarBasem Aug 4, 2023
b27ddce
review
OmarBasem Aug 4, 2023
d0c060b
update test
OmarBasem Aug 7, 2023
ddf0002
lint
OmarBasem Aug 7, 2023
4005856
test
OmarBasem Aug 7, 2023
2efa8db
test
OmarBasem Aug 7, 2023
cba1d92
updates
OmarBasem Aug 7, 2023
7cc9773
updates
OmarBasem Aug 7, 2023
3fc12cf
test
OmarBasem Aug 7, 2023
5dd2c1f
test
OmarBasem Aug 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions src/quo2/components/list_items/token_value/component_spec.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 42 additions & 0 deletions src/quo2/components/list_items/token_value/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 60 additions & 0 deletions src/quo2/components/list_items/token_value/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 2 additions & 2 deletions src/quo2/components/wallet/token_input/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions src/quo2/core.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand Down
1 change: 1 addition & 0 deletions src/quo2/core_spec.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
2 changes: 2 additions & 0 deletions src/quo2/foundations/colors.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
4 changes: 4 additions & 0 deletions src/quo2/foundations/common.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,7 @@
(def currency-label
{:eur "€"
:usd "$"})

(def token-label
{:eth "Ethereum"
:snt "Status"})
57 changes: 57 additions & 0 deletions src/status_im2/contexts/quo_preview/list_items/token_value.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 5 additions & 1 deletion src/status_im2/contexts/quo_preview/main.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down Expand Up @@ -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}]
Expand Down