feat: add token overview component (status-im#13555) (#13767)
This commit is contained in:
Jamie Caprani
GitHub
parent
53008b17a6
commit
53770725e5
Binary file not shown.
|
After Width: | Height: | Size: 888 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 862 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,107 @@
|
|||
(ns quo2.components.token-overview
|
||||
(:require
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[quo.react-native :as rn]
|
||||
[clojure.string :as string]
|
||||
[status-im.utils.currency :as currencies]
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[quo2.components.text :as text]))
|
||||
|
||||
(def container-style {:display :flex :width "100%" :padding-left 20 :padding-right 20 :padding-top 12 :padding-bottom 12})
|
||||
|
||||
(defn price-direction [price-change increase decrease neutral]
|
||||
(cond
|
||||
(pos? price-change) increase
|
||||
(neg? price-change) decrease
|
||||
:else neutral))
|
||||
|
||||
(defn price-color [direction]
|
||||
(price-direction direction colors/success-50 colors/danger-50 colors/neutral-50))
|
||||
|
||||
(defn divider [direction]
|
||||
[rn/view {:style {:height 10
|
||||
:margin-left 4
|
||||
:margin-right 4
|
||||
:width 1
|
||||
:background-color (price-direction direction colors/success-50-opa-40 colors/danger-50-opa-40 colors/divider-light)}}])
|
||||
|
||||
(defn get-direction [percentage-change]
|
||||
(if (zero? (js/parseInt percentage-change)) 0
|
||||
(/ (js/parseInt percentage-change) (js/Math.abs (js/parseInt percentage-change)))))
|
||||
|
||||
(defn trim-minus [percentage-change] (if (= (first percentage-change) "-") (string/join (rest percentage-change)) percentage-change))
|
||||
|
||||
(defn token-price
|
||||
"[token-price opts \"label\"]
|
||||
opts
|
||||
{
|
||||
:currency :currency-key
|
||||
:price :string
|
||||
:percentage-change :string
|
||||
}"
|
||||
[]
|
||||
(fn
|
||||
[{:keys [currency price percentage-change] :or {currency :usd price "0.00" percentage-change "0.0"}}]
|
||||
(let [direction (get-direction percentage-change)]
|
||||
[rn/view {:style container-style}
|
||||
[text/text {:number-of-lines 1
|
||||
:size :paragraph-2} (i18n/label :token-price)]
|
||||
[text/text {:style {:margin-top 4}
|
||||
:weight :semi-bold
|
||||
:number-of-lines 1
|
||||
:size :heading-2} (str (get-in currencies/currencies [currency :symbol]) price)]
|
||||
|
||||
[rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
|
||||
(when (not (zero? direction)) [icons/icon (if (>= direction 0) :main-icons2/price-increase12 :main-icons2/price-decrease12)
|
||||
{:no-color true
|
||||
:width 14
|
||||
:height 14
|
||||
:container-style {:margin-right 4}}])
|
||||
[text/text {:number-of-lines 1
|
||||
:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (price-color direction)}}
|
||||
(str (trim-minus percentage-change) "%")]]])))
|
||||
|
||||
(defn token-balance
|
||||
"[token-balance opts \"label\"]
|
||||
opts
|
||||
{
|
||||
:token string
|
||||
:token-img-src :token-img-src
|
||||
:currency :currency-key
|
||||
:account-balance :string
|
||||
:price :string
|
||||
:percentage-change :string
|
||||
}"
|
||||
[]
|
||||
(fn [{:keys [token token-img-src currency account-balance price percentage-change] :or {currency :usd account-balance "0.00" price "0.00" percentage-change "0.0"}}]
|
||||
(let [direction (get-direction percentage-change)]
|
||||
[rn/view {:style container-style}
|
||||
[text/text {:weight :regular
|
||||
:number-of-lines 1
|
||||
:size :paragraph-1} (str "Account " token " Balance")]
|
||||
[rn/view {:style {:display :flex :flex-direction :row :flex 1 :justify-content :space-between}}
|
||||
[text/text {:number-of-lines 1
|
||||
:weight :semi-bold
|
||||
:size :heading-1} (str (get-in currencies/currencies [currency :symbol]) account-balance)]
|
||||
[rn/image {:source token-img-src
|
||||
:style {:height 32
|
||||
:width 32}}]]
|
||||
[rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
|
||||
(when (not (zero? direction)) [icons/icon (if (pos? direction) :main-icons2/price-increase12 :main-icons2/price-decrease12)
|
||||
{:no-color true
|
||||
:width 12
|
||||
:height 12
|
||||
:container-style {:margin-right 4}}])
|
||||
[text/text {:number-of-lines 1
|
||||
:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (price-color direction)}} (str (get-in currencies/currencies [currency :symbol]) price)]
|
||||
[divider direction]
|
||||
[text/text {:number-of-lines 1
|
||||
:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (price-color direction)}} (str (trim-minus percentage-change) "%")]]])))
|
||||
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
[quo.design-system.colors :as colors]
|
||||
[re-frame.core :as re-frame]
|
||||
[quo2.screens.button :as button]
|
||||
[quo2.screens.token-overview :as token-overview]
|
||||
[quo2.screens.text :as text]
|
||||
[quo2.screens.tabs :as tabs]
|
||||
[quo2.screens.status-tags :as status-tags]
|
||||
|
|
@ -23,6 +24,9 @@
|
|||
{:name :quo2-button
|
||||
:insets {:top false}
|
||||
:component button/preview-button}
|
||||
{:name :quo2-token-overview
|
||||
:insets {:top false}
|
||||
:component token-overview/preview-token-overview}
|
||||
{:name :quo2-status-tags
|
||||
:insets {:top false}
|
||||
:component status-tags/preview-status-tags}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
(ns quo2.screens.token-overview
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.token-overview :as quo2]
|
||||
[quo.design-system.colors :as colors]))
|
||||
|
||||
(def descriptor [{:label "Token:"
|
||||
:key :token
|
||||
:type :select
|
||||
:options [{:key "SNT"
|
||||
:value "SNT"}
|
||||
{:key "ETH"
|
||||
:value "ETH"}]}
|
||||
|
||||
{:label "Account Balance:"
|
||||
:key :account-balance
|
||||
:type :text}
|
||||
{:label "Price:"
|
||||
:key :price
|
||||
:type :text}
|
||||
{:label "Percentage-Increase:"
|
||||
:key :percentage-change
|
||||
:type :text}
|
||||
{:label "Currency:"
|
||||
:key :currency
|
||||
:type :select
|
||||
:options [{:key :usd
|
||||
:value "$"}
|
||||
{:key :eur
|
||||
:value "€"}]}])
|
||||
|
||||
(def eth-token (js/require "../resources/images/tokens/mainnet/ETH.png"))
|
||||
(def snt-token (js/require "../resources/images/tokens/mainnet/SNT.png"))
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:token "ETH" :account-balance "3.00" :price "1.00" :percentage-change "-3.0" :currency :usd})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50 :padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:border :black
|
||||
:border-width 1
|
||||
:align-items :center}
|
||||
[quo2/token-balance (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]
|
||||
[rn/view {:padding-vertical 25
|
||||
:align-items :center}]
|
||||
[quo2/token-price (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]]])))
|
||||
|
||||
(defn preview-token-overview []
|
||||
[rn/view {:background-color (:ui-background @colors/theme)
|
||||
:flex 1}
|
||||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
|
|
@ -1216,6 +1216,7 @@
|
|||
"token-auto-validate-name-error": "Wrong name for token {{symbol}} at address {{address}} - set to {{expected}} but detected as {{actual}}",
|
||||
"token-auto-validate-symbol-error": "Wrong symbol for token {{symbol}} at address {{address}} - set to {{expected}} but detected as {{actual}}",
|
||||
"token-details": "Token details",
|
||||
"token-price": "Token Price",
|
||||
"topic-name-error": "Use only lowercase letters (a to z), numbers & dashes (-). Do not use chat keys",
|
||||
"transaction": "Transaction",
|
||||
"transaction-data": "Transaction data",
|
||||
|
|
|
|||
Loading…
Reference in New Issue