From 53770725e54b81ebd183d81266679436bb632071 Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Tue, 23 Aug 2022 16:44:46 +0100 Subject: [PATCH] feat: add token overview component (status-im#13555) (#13767) --- .../images/icons/price_decrease12@2x.png | Bin 0 -> 888 bytes .../images/icons/price_decrease12@3x.png | Bin 0 -> 1291 bytes .../images/icons/price_increase12@2x.png | Bin 0 -> 862 bytes .../images/icons/price_increase12@3x.png | Bin 0 -> 1257 bytes src/quo2/components/token_overview.cljs | 107 ++++++++++++++++++ src/quo2/screens/main.cljs | 4 + src/quo2/screens/token_overview.cljs | 55 +++++++++ translations/en.json | 1 + 8 files changed, 167 insertions(+) create mode 100644 resources/images/icons/price_decrease12@2x.png create mode 100644 resources/images/icons/price_decrease12@3x.png create mode 100644 resources/images/icons/price_increase12@2x.png create mode 100644 resources/images/icons/price_increase12@3x.png create mode 100644 src/quo2/components/token_overview.cljs create mode 100644 src/quo2/screens/token_overview.cljs diff --git a/resources/images/icons/price_decrease12@2x.png b/resources/images/icons/price_decrease12@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..1b149560b49a54d33a33fe34ce2e06307b1a2346 GIT binary patch literal 888 zcmV-;1Bd*HP)V&4s69v|^u!4~;(;3%sBOa^(0`!+Kz{)#Byiy*7mmP*Qw;_W z1P<1KTT`S0ErhnSGtS#G*lu^%68)0x?##Y@-+MFjzE?^Da5z2Pb1xcwMumt`%EO$H zFwRqen$1L6H^^7*=lQn>>+2OiAJl8|WMLu97@HK7$4M8kZF10iagp~T>L57EW=D0( z#|7s-7-_9hKfKT3d#PG2CvF@Zr_+NbV||w)7|{fIf^(eGx*%G9D3{ywC9pD?q>Lwt z&(gT?xm4PIxv^0r0oa$>-sAP8A|jF`zO5%HzfyxjPmX4H1_WM(FOOK>ey#5KpwLPIYHN7>Yrl}QP_ z@Y%~|Xk}#&mllKw)glqc1~7WHewXqjkbgw{>S_xQ2Y`r)+1U_W^V%@Jz~~bJ=eb+Z zwY56fjRSlxn#L$l8-{V9>#RWj6AVTzymPL_LDT5~4s0H3i~dJC_4+tFH}*GY$Jy*y zF`atbI#=rLE#qAW(FeG>IC!|ce5wra15U{Y5U?3Ug3dv(O+m>!>(%@lHJ?~qbb>`` z0k02j;2-7fOkVwdB+5D3pe@(LmX|M(3=Z4=&AD~5$*t~k%3rjS7@Ry;?=>RYol9H% z=9XMaiIahp4`7^DaS$0W2V0rlB)DX^F9m(?=Ny4L)m#d83IMjVj4@O-NxceYHKi5}9%RfQuF>J&)6QZ=G-U|@ O0000Y+gEi}O=49=oa(Q}7ZZ0a{YBav0dLK)+wVo;;h$e8f@A^bJtc z0-QH6#%jGD)_>jH-23#wgAVompvHWhPM_lmOmi-#5HL4rS4dVle{fL7d-uB5K%0w; zsdl&fiQ_=p1d*cm_?M^6$38%qtSLKZc{?wG@GMg{74Wj6j~;ygB2<@QQ9w0iW%3zB8wf znFAmFL^nuz$z!2q4vwSuo89J~)fPVr$^Pe7 zd@nI3vuks6Db^O9oUhOmxc)l4;|qC71^BlAK7KBhQ(%zQ3hIQ0*DTTzHT}}VG(#@* zz9ZVa5j3b?Eav_xEPMqg6dFr5g8EQ6+6k1-FpS5~_zmxJz7+%`rMoH+zNr@$zJ`cG zV`wbd2!c`vtqzeMVv_mEl}9^p0{>YoPLLth;~A0&x1vCiE{!>~?)@>cY3lSH8&W3N zFoW+cE$v9eyJnj$R6mSA7VnbHVdI#;?7RUtZX^a3&M%d2DZ{s;Kn26VZL&3}YyPG{ z?5d+gXqTyjE-)*M0u=>@Wb4hO-UHQ?wU~=g*8>?pHeWstN_~B3G+m1VL(*2og8!`c z!95j2QZIGnEC)j*2ujJsar$8}B!l}P+h@s|?p66oP#jr6od|}GEi>=l-)_~|^qo5` zA+Y|ORwnAF<1-KhC$iFkar{;0Z}zV-yRTU zag+yn4a!S{X{9ZcEeuIpCH-a&=GSX_V@z;(=s#0h`J`A3ojMaL3Jlrqt3Xr%=|A^X z9sd@-xWd(x`R|mF+m^t#^2fr$rBe>*l$BE1x0k;?%CSvlN-L=}(VZx+*?P)G$d(C1 zQ$_Wjsq;diNJU+0pircw|CGwJGbc>mg35A&X{kbSdRU=242ldOIMsNwS+xZtknzdM z%gE$qGpkU4u%QZxAE#|fX$_#3{?oD8tQk{Ba88Zxe>&i9ck9m@9~_q01TdD#oQcI` zR`xLGZL|gmNmyAPdL84HNUCNV#dQp=klAEp=S!pbX`j0(j@P|6Lirg~%-R)a$E zH39BL@BT;Sy%>P^NpK=!3TkHS;002ovPDHLkV1gzH BUgQ7( literal 0 HcmV?d00001 diff --git a/resources/images/icons/price_increase12@2x.png b/resources/images/icons/price_increase12@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..abcc131251514a77b11b8af02eb5e6dd11fddd20 GIT binary patch literal 862 zcmV-k1EKthP)IEuUqN$a!qv;1Xa`e7}K1HvW;=jSsj>5m3Xz2X=k>w{WdrUgr(7`vL$9A@L8j7mqJBVewISpBM1@b2`SnPF%L^}aC`3*#Csh&^ zXL);O#t|{#-TJo586hP^;p4=;!XW{6E&*@ySdv;PwmCTpLxDNJVJ_J9irEPo7kn(5 zJa7<2KCtk7WMJXNNZ7Yx;99zBMRNe;2Irq-ngYB;rNRbcY z5kEz{`~>0mBBIsBFDdM(#gJE(q6g+12tBSwiP%-B z=yf2|NI*$`DNaq5qsWQsw=BZ7rbAz?@m!S1#`N?*vq5P=5dtD>td)Fg;{ICu8lF2K zBItG)7Y6&)YTb>vWo%F8p9U(AqsZGu_{cUV@{i0smy(86*CNmV0a9ktcrN=@h~_=C z{vi$x0|!hv=~UYKL%|8DGLn?~#x2|K5&sGD7xnW~5tJ~Q=+tE)2&q9%3~@@dCT_y1 zmXH&Je1DJA+jaNH#3{jLho2^K!Ken6=njW$Yb87>Ou5&k!YRLH0Uf3sw^;XAdCVo7 z7m5>t%f0C(DEw7Zb`CV0)|wvI23x^>TXZEy0kBUSU@aGD~o=7v=wXqk-+XCco@ zmFh0mb{g5<9UN)81GCbr_ezNaroFQBVqD8KXm5i@f@l|={pDjd{dOVmEL{ZG>*u0q ocBQjlQ7!0PdtUkX`?$XS7x%2KgXTAR<^TWy07*qoM6N<$f@>Cn(f|Me literal 0 HcmV?d00001 diff --git a/resources/images/icons/price_increase12@3x.png b/resources/images/icons/price_increase12@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..4b754de8574c610601906d2339661b6946686b2b GIT binary patch literal 1257 zcmV=P)KoLN1#MPmJ?6$!l|bqBv%kyC^DD$(hVt&>v+90uk-BAdh9sa-Nembvh3ZRnf>|A*Z&QOl$t4( z@>3V+CFpc!z;S0mK!%92{0sovB-8;ZYLM&fx=sJz%IfEhH0?vuf=fT&S&*Sv&~Kd+ zX$0g;6y=@wZd4N$k1OzEsWdl{Qw7)gUp@q8=wIC*KkT z1seo`?uUNsz5$36w*wPuK`PzVXhm2@3tM}?jv8Mu8b-Zscafw2Rp>YWND4BlO_@=b z05w<))Bq5N9AICYZx#o8+ zmcE%g0wfhgq@==X(#Ui{h;H#GF_exJ&o*+vvbx$JDeF&=GVRX8WpPdlwcm~|6#2Yu zbvw@`jEooxT0V~`adZ&+9$Pz(a_{}3=i+#T_Z~rJ*j7FbvFW!x*v_?Hz80DMSASTa z4H4goDrgJ4Ge$pcYyQXeWe56ZUuvIifTET9?~m8&wyop}^WWcD5M$QMrEeE)7*4Sa z%m5IJZ6yz`sIUuf^1l&d61U|}c#(hRuHt;pE;Bk&%;-eX$~4*Zv(HX@l3_G5E!Qv@ z#3YI*L2;(3NK{>Iag%~E2o-V{9e|7G$fgHFJ_i5&mME1r;;GNGZTPT(MWkwc{u4A| zFWYST_F+S7YHD&K+nL2s6#=m@03zbk^4Q~;B|Weu>YNSFcpSqUr%;iLO#;t^B)4= 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",