diff --git a/resources/images/icons/price_decrease12@2x.png b/resources/images/icons/price_decrease12@2x.png new file mode 100644 index 0000000000..1b149560b4 Binary files /dev/null and b/resources/images/icons/price_decrease12@2x.png differ diff --git a/resources/images/icons/price_decrease12@3x.png b/resources/images/icons/price_decrease12@3x.png new file mode 100644 index 0000000000..c7ab645960 Binary files /dev/null and b/resources/images/icons/price_decrease12@3x.png differ diff --git a/resources/images/icons/price_increase12@2x.png b/resources/images/icons/price_increase12@2x.png new file mode 100644 index 0000000000..abcc131251 Binary files /dev/null and b/resources/images/icons/price_increase12@2x.png differ diff --git a/resources/images/icons/price_increase12@3x.png b/resources/images/icons/price_increase12@3x.png new file mode 100644 index 0000000000..4b754de857 Binary files /dev/null and b/resources/images/icons/price_increase12@3x.png differ diff --git a/src/quo2/components/token_overview.cljs b/src/quo2/components/token_overview.cljs new file mode 100644 index 0000000000..2b17c99a5b --- /dev/null +++ b/src/quo2/components/token_overview.cljs @@ -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) "%")]]]))) + diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index 2f6d19dac2..1c1ad6eb71 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -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} diff --git a/src/quo2/screens/token_overview.cljs b/src/quo2/screens/token_overview.cljs new file mode 100644 index 0000000000..470608f486 --- /dev/null +++ b/src/quo2/screens/token_overview.cljs @@ -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}]]) diff --git a/translations/en.json b/translations/en.json index 80e00b6c18..5b100944ec 100644 --- a/translations/en.json +++ b/translations/en.json @@ -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",