From b0e45207df315cc9a62d4d9eb613fe188be9ebce Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Thu, 3 Aug 2023 09:08:08 +0400 Subject: [PATCH] Quo2: Token Input (#16819) * feat: quo2 token input (1/2) --- resources/images/tokens/mainnet/SNT@2x.png | Bin 1927 -> 2084 bytes resources/images/tokens/mainnet/SNT@3x.png | Bin 2765 -> 3055 bytes .../wallet/token_input/component_spec.cljs | 18 +++++ .../components/wallet/token_input/style.cljs | 44 ++++++++++++ .../components/wallet/token_input/view.cljs | 67 ++++++++++++++++++ src/quo2/core.cljs | 6 +- src/quo2/core_spec.cljs | 3 +- src/quo2/foundations/common.cljs | 5 ++ src/status_im2/contexts/quo_preview/main.cljs | 8 ++- .../quo_preview/wallet/token_input.cljs | 38 ++++++++++ 10 files changed, 185 insertions(+), 4 deletions(-) create mode 100644 src/quo2/components/wallet/token_input/component_spec.cljs create mode 100644 src/quo2/components/wallet/token_input/style.cljs create mode 100644 src/quo2/components/wallet/token_input/view.cljs create mode 100644 src/quo2/foundations/common.cljs create mode 100644 src/status_im2/contexts/quo_preview/wallet/token_input.cljs diff --git a/resources/images/tokens/mainnet/SNT@2x.png b/resources/images/tokens/mainnet/SNT@2x.png index 817a08849fcc93540862e93154b76bb70f7f19d6..ffa49bb1dd41d802c25985ad3cf6d2b7f1a67598 100644 GIT binary patch delta 2055 zcmV+i2>ADh52O$wiBL{Q4GJ0x0000DNk~Le0000$0000$2nGNE0IF$m-jN|Sf4NCS zK~#7FL1x1;WPZYVe%>PM;jt;%z*E0CHITA#l4c2&4mJwS3p~MyG6djqYfOsHbf5;UQh2skY z5uYG9!?sKf#uY>?0kpg~cOE75dc=_lV-3V7T?{OQWs-yAzSkDPL~8h6w&_eMzbZ)pr1{$<;xH8VT3-Y?b^Kyzm9vTybkPu@fRS;-E%fA@9FTv_|uMZnP> z966xABsM{HkPm`X=Partpu8|SwqqddTcNCYoadpA6CC96z2X91sc-`$6Ccd;;01|KdON}JHykF<~Nc4QgEs(1>gL%3}64a4AJ3Pe}Us!K`)>6nYLu+9%|n= zU)gQjf^g|<4RoF?&&_V#wW0gcB1A{t3MR*zw(}Xqw3+7c{K#*Z{GMG1L;ZDSlV=<` zV8O>9#2J}f>n2OzuQk8=ADOS|zxu3>%sTpgJ|uTw3yKOI-~nvJE|u3nIf60FmzGgW%||r>@PKKL@l^oyiDz_pUfW+7I$+Ub7H1 zmDI-X5Y0yZFE7+V#lYpt3pN6|)>km6eIDoIntl-XA2<*PUaWHv+5{~@9nxpb383p_ zaDR11~nz@}d; z(<>L830@mrf%wn@;F3R;U%WKq0=p9+|JxmhQsJcpOy7fV?P=pBAJ5G7f4c-vp8*v# zg#`BO5~}#&VU3fUdN;v&N+!-`&cW{bueS1gW6#%;nN?Ru@fy5Jkj`^;G-?5?)#Jx3 zXx=NJe|~G>XI$R0rdhjQP@8@%DPEwmjQTB*kiV~ul$x@fL zr{(oWY@?6#+4wh1GT-OP4|C95Nlg=iOke^Me*h0*aeO|AkzZC4m;)>h=?Z{5(F8Xf zsW&lQVB1zm3_Sm56ut{s6GAT+sgVGZaD%wGHey!$nj>EybIe`aEXq-Jl+pceIxwC` z1?L3)-z|Yr_?;wjoR4}+Ov({`j2C!Vdr`sUyFXn3)9^TQ<0T*c@v60Bc3v-v#G4i$ zf9|hSv$y47ijtmBzF0JD`V4nkoXmeR+qjp{_)Hxs2l*&vya06W^CcC|f3KTN_37(67N>a2ki$5vYdYyA368-AcvH}>R4$>4^G zg;l)*FRTvF^wJE`Wu6|>Z6?WpXM{OVf6&DbY#`}8q+HSg5Mhv3h5QB50s$m#1r-A# zt^^R$QCh%of>umzK;<9O;U8?grjmy&@ckFtWJ0SJnk2aasuh-7Oscy}#5esw3Yb@f-Jkm~tuRra#!hkYkh0Bk0{D<}cH{1mx-=pJJI%IPcCNnSL{f88Hz z9N>tlhmUHD2VRe$N_qQ=^$6ffLO10%<(0?n5|o>8(Y*_6B-TB;2Sl@b@+ab5*H zsWZKG%sz;+9r~?~xgHDTWxb||e}SDNF9VJrp!HDatQqja5M$Gn?kLq)vD}1dqXMMk zYTX~6$2oV2vS}*T6E|mOyH)Yz3qrVpFt=?kNIa_6gNUs%WesTekRVRycZ{Md40et9 z8zSimuy}%;8TX@@N{Vr7RFNplsU0Hu>PI?oV z?v)ZG9(cOs!Ht*5TW!F42NKvk4QP)_i6c{$ym`79To-9Wz41zIp_fIr&!fA2p8Wce lkYd7yp3up{{Vkmc1_FxZm9qO002ovPDHLkV1f;#*Sr7# delta 1897 zcmV-v2bTDx5Qh&TiBL{Q4GJ0x0000DNk~Le0000`0000`2nGNE0FDvzt&t%$e;i3f zK~#7F?VZhU6lEO8zcafKQW~-%vBX4}O)+`{JcsfG|qrL&0`3MnAASDqe_f5UJNRGeM%8j!Q(4EtPMDx#PH;tLrwnMX)y2$1K3 zX>#btQ7uxtL&h=3woDh7=5p&SXQ$E28Z=DryyMwx)LHeE!MUvLh= zh*pc7T;cc@3pc+vlQ}5BcL5_J+kfR@;ut4Ede=XSAnZmDf#VsM1+MnFw)MD_AH>|?`|Nvfudb<;unX!is(te z9v08VvxqGVxB5^cS} zYnI47*6iyV4q>M>o5lu4`i|%4&B4if@7ER3@q4T=qS6oui@f;5gZ2Dj-61UEUBsq% zB;nNgHK{2ehpwDXU=x>Ay}G%kfKE$llS(X%*NVzj0v=5-MY*3Be0FsrHR`JSrpUI4w3||8gVtb#C_uk%t zci!q>Biwo@{5_=dJI1c_wcQ zsfhfXnS8;0QWkJHf4wMCH+B^ffR^_4=ex1HfyFgLrHBQr4rR<&Gkjd}r`02owhZps zif<=g?npdx>O=x3#e!83LwwYIY+GPy#Q+{5WGEgj&+Cw_2mRuQpZ#T@eWn~t>`z)+ zZV@gVwiBPc&e_&ZFLp(bIYKIXbr;aC- zh(`t#{aj~p6m+LNF%S~Gz+;l*bs>g5wHpt)S*p_dh=Kr8hJH{lqL@O6sPa)REb~-R zv{sV31pHZ(2#Gh}=z~hG{P3VE}Q7hh>3-uWW^%xb3Xj+snA~TOhqbVyN}t zjgY_GSKmFfhZ--Qhift09qXi(@}St;oyV2%d+6it{rSxPIYC%l)n!Nz(84Bd6P^X4 z)S~aNur_kviJCk=_@{XUWhJ9B(l&zv<`7^hxBs7;f)*&1h_(QQT=+@ZFO!Bg(CL(Ty0dsG>273xWpH9XPH6{3K&q>s=BPcQP2?jzw)e{nBp}k z;K{#g{8JRHPqR08JCjN}tPB)zUqOYypz-M!_YpRl7PB{V+XB)LI`<;*6-G(FMf_44 z5Mh>XE~{4ICeOBj9Lugr`i-A0b&B_slx`8ge{`3)l}iH=a0&{Tl~m)(>|=C-J8Wlf zg&lQExWm_eT=~Y4boP;|1}hi)a0=5abOTWtwuI4l-b^Ol=WFr|F~=#Zh0P`Hz_f#% zlU5rF6pq6`!0vKOXqrC0=6U54XA^Z+b(^30A*VDcq}yQNFlE5`UAoJ+MCd1>mT0x1 zfAz_y8p>4c8L8?b98G7(Ras%TW1%=PZw`)EzE;&=5>GQ}DXL7mnUe2YD;}v5&AhZHs;GjnEgq}CgCTf_z6jEd@{+ptQ@dF$TQqppBXq}lL8 zS%&VpOoN^44JRoiVVsm+jgktbJ19=ge@*Xgc$=uEvpfapOly?3{i6u4dCnYcdQ+jM z0x~K~@;I`QQX3~>9%7w{zY0@numA{bHiuhDHZUNaBtJkK0|1*C?RLv8s`0rd~8IyNj>I-19QIXEX=cW&)WdKzh2qQm1IK5+I zYQ*I_jaQ}xp%@U~>o|bTf7P1$&jLxCD))kLa`(eyk17Id7u5ZXCx6W+;Pn|26wbSF)?H^|cVdum#~`j3rLfQrmrTnC589!#h_ z;pONHI?mt9p=KvgIV8CjZMEW*n+hPEVla7~0qCO%bpEJn-Xkm%6^=AZSu{040%}vX z-S2CD3(!hx`2&@fZ+dv69d)KhY?a(j9#9E9xf*R1fR6oZcJEx)k)rV_FmfWO^Z0%8 zTZc#_@64!Rf1@Kaz}lZQJ$<|1HWFhXRB4ni$`n9C`(ZN|rjndsM#7U0!a1bq9O1sL3!B!A&H!O}em*FLGiXP?*LKmR3g4(3jesF8Na zJ65X`Y9o=bt5c6dV-N2{VW-Z2`z-(_{Ks#+pkLd;f6PZ!_`_e;+zY}EOVvo)t=X@> zWbaN0;LwQ&<4RH{-=otFW$+aTUPSoWj|SlQYa3S(CjYm8d=A$>t${mG5D^(crz4`Y z+C-x}=yB9@{Ivr7_4nnD$Y-z+fA_1BYC$f8jHEB9S^m}R4Pbh`wL8%c9{KUm`7&8= z{-FDWfBodws}5TNw}O>u>sh(5JDgP!sd)ivqv3mu=4Sc@SL8F^{^<)2BPI;yyBY+} zSR?vWTIL55;gcV5Nj~E%iu@m*au;wQSez1`3g2o01Oo`8@ezIrVEns9r{vqe;|xiq z9u4~hS^z$qA9j>)zL8HT%)fQuMOVQ`(hTv_e?a`IKjFuM;sgECe%Aa0`|^v(_U{8{ zup`TmbMpyeJi`n92|w8+I5i7-!!kn@n0zs!Y!MMzQ|$Z^KwhRNKO{_hh5dk7S*d!d z{hV6J)AWS+;`6JV9Esff#H|)6F^9QE(0_gu>knFiXtKn#dAyjXaRW$;7jFf-!+nV>ZJS(>?P&^YRie_-LZ8J6rF@wN|80szmzn)%BM&*2|x+;(Xl zv#_6YH~UZvgY!82$|>c+!T1}ssQUVBCKu<9I zvYC~TN78NSzAw%Pm#mLtOHyi&rBzS zXF&Ud*!&=(uI3xCQM(@PA-BzS*I<6O-#hKMqf8=gd4%~V=AzFXJL1PrfAS%OlW=}% zKXV%^w_;fl) zIxM&vnu$)I&*Et37Z+BwP`w2u@;}q|uI7)a=1?7l6LZt=lvIwty$+fevl?1~E|(v+ z%=*Vv>j&jgUIId0;lp(+U~s7Ty)!F1Kg81!j~^{GobkYO$ru@;SIpRc{SYz?A`48D40z=tI-k zPf}qL^{RBiiOIvM9iG8(6e=n%^3o^Gj&CXe?y*UN$@uJ5r#J?E4@%?rd_h~Bw#&z+zM;HJ8 zb{0ZC`P_H9`N8g%*A8H`Jx7Eci$t^{qwQ#pGVU2^a$$DgG_;8gCwP+iB6F(kku%CB zeCZyvbj;jpWkR~-wtwBzovrFR}%_@V}ou+PXtEOS<59fei~F|eA&sC#B{e- z%w7*Ye`)_*CSU#VX_dtoZ+f6EZX`@CyQrXSc**HYC+n3=ibRiFNPzVpgq|~lC+U)h1e#MfeEn&;Fw;xY zZFrk2;G(AGmFkG)jCM4_mTWDugi5;F7UU#PV-ZuC91!$!}!k-U9CD9bE!g3c@HnKxc6x9i3>dZ?I*p?0#!&Q z7QBb8b{t){<`Y#|bLkemf5)wM9L><0A6%xADb0dWsNhe}0>41%e}u{K^|^M(pS?mQ zQHsED$s0sBRajQE>`ZAcyKsSD@;Y+^7MJQbt}UBVL@qQ2qiDh6zD-u#JOpt$Ec_Hl zVHSL9{^12u1D`Cr$8o)trLPoH0V_mcD{cuCB=W8Ww&IpZ0V3~8f8eN5aFZ-0(m%K2 zA6cfHtpGWfnM^N`um4lPr~ii3D6c zI+1mzXJ!}ehCSRSStIcby_Nny%wSLY2(DCDY+9ZSY-(27ClVS^u)38Sb3H9sPQE z9RBjNbYS23i1pxKPiggUpU~|;Kc)x&eoE397mG&<%*oZgy3UB)&mx|A@c^Cq=7B)e zJgl+MH7mkJCj||c z243=kE$@gk=L=L5ATHuuq#s>O|oW3pyi(Z+BA zn*!IxJ;#}{E?zvgk93oC)0+abdp=8sgKQZIl}=t}E7ncYO>YXU40q4_qeMqHNVHJ$ z)XZj)Di9dO4ae}F?|0ZW$2DZ#0r zQ0@2@e;Ew2W=T92(0OvmY2h3QY;ydC^_~%s*d+P*e-c`Y4z^n+7h@)qz=*kU%hD`235vH(G7z2Rz&M%0%u3-jWK`#K5Et|@4{AL+ z;_qW-qUOV)#CaxXLn59R{g-=BL|g0-<_e6NjQ9DX=UH(ulUThFh(4md_vrobgM!z< ze}_l*%7*bcr@W4dIhG|Q`ukdzQb88oGqKr#861b$wH}FL@o;QKJs55^j?Fm7Za2$o z9O3ac)*{KNFJ}YeV5EXZ2#m#I-#EUH=Ay-7d3cma$ksxExHqi9R%^=euMm zT_ch#2#XmTMT~uC5}9AV7)@;S7o6WZ>N-40IuJPB`o>CL;~|sn;|#30Q?qdM)wwhk~THl70zdO zquUgiyPZC1M(4U7#9ad>(WRoVe+JtvI2sSPNi#a)ALd=X@w*SGCbZj$ZT`0ud?mPP zSW=ZeSa^+k#N7zT^^@Oj5g2Y-cQy?dz3}UID{7KzBf#IgP0-`_J zVwZ^vUzW&tUMx4Mkz0=O+e3F@+18VD$ni-45E&bM7VWO#lJUGX80&7Me@`3RZYDi) zD#t0WgZ-jgBm~UI+U-^i!6x1UR{$0Tht_+4@@J0^KR&Yf%c@_Mv@r{YFIYK`W(0&z z+i}8}_ATxRLDaem8{;_c>mwf@_X{VzPR9{E84vTJu|{~fLGdV>|BQ7+wJ2JofQ_-k z*89~_KO1WbFEpRM@{jJ*f14zbK*Sn!e2Rjt_v+Z6P53==vDmVmN!AM{&TK<0CW~kW zv~h9L&nF6uHX;cqUs}fEPr7d**l})ZpJ?9pishlg8*uFCVRsZbs*G4yEsnwK?G(3p zPrYWvCR}pZDX~hDdij8L)iPiWKI97h$+Z7JwZPU@%YX&@SsK@zfB66DVYhG%zMm|b z7+kv(Xpo-FE4=#TE-E|CwsH`6SNy|QC?lB#M$edIz&RykxyxPv;%14vNpi3JZh4(K z{&c);`rTTj6D3v0v&7vbxfkK`3$C)b^JFO##n<>^UU9*$R#~t3v&+hgTo#J2?L}N; z+69Gd&cVH7kDq9Xe=J22h|8lEpLR)MyRTT03!^Y`L17zVL~rPvt#;)H2^F8t7bPwz zeE%fQuA5PI-6TtDqM^`vB(GE;rEHL8Ma~9hL`LFvsbEUks|atD-|#V8*4z<=@*|2E zWrzz(-{OvwugiQ|umzE=Al{;JkhQj)l}h$7v@UxK*nqv=f8S*RBQ2F~QhD0zEV4Vg zv{$XUDyvOW`7Wfe<|$H({L&X_?@+1LCegOdEN&~$*1S}6w;c%UgjU-o4QLZM1{E+0 zldvY$2UMfF?2a$$5;jJ=z%h}~h|k8}?v?~t>@Z>kj)Ch|q&$OSw2E$QvdqT~DZ<8x z6F4RsTDABMe?sUM$s)ejRGVu>xB4`=9&KVH4zU6!Nr-(`h3Be=St|Oc7j76QTht^* z2s}*a#&KioL8}D8lXrsaQYh$MhX!lX+;19;6nGf6aNLA(4x%gC_(F77bKDoX5sBX% x`jt3t#unHOkHJSA|JSe!J~m1>!9sW9|J@ZF(ODR04T=B&002ovPDHLkV1i#rH~Iho diff --git a/src/quo2/components/wallet/token_input/component_spec.cljs b/src/quo2/components/wallet/token_input/component_spec.cljs new file mode 100644 index 0000000000..9516fb1927 --- /dev/null +++ b/src/quo2/components/wallet/token_input/component_spec.cljs @@ -0,0 +1,18 @@ +(ns quo2.components.wallet.token-input.component-spec + (:require [test-helpers.component :as h] + [quo2.components.wallet.token-input.view :as token-input])) + +(h/describe "Wallet: Token Input" + (h/test "Token label renders" + (h/render [token-input/view + {:token :snt + :currency :eur + :conversion 1}]) + (h/is-truthy (h/get-by-text "SNT"))) + + (h/test "Amount renders" + (h/render [token-input/view + {:token :snt + :currency :eur + :conversion 1}]) + (h/is-truthy (h/get-by-text "€0.00")))) diff --git a/src/quo2/components/wallet/token_input/style.cljs b/src/quo2/components/wallet/token_input/style.cljs new file mode 100644 index 0000000000..52f7a60e8e --- /dev/null +++ b/src/quo2/components/wallet/token_input/style.cljs @@ -0,0 +1,44 @@ +(ns quo2.components.wallet.token-input.style + (:require + [quo2.foundations.colors :as colors] + [react-native.platform :as platform] + [quo2.foundations.typography :as typography])) + +(defn main-container + [width] + {:padding-vertical 8 + :width width}) + +(def amount-container + {:padding-horizontal 20 + :padding-bottom 4 + :height 36 + :flex-direction :row + :justify-content :space-between}) + +(def token + {:width 32 + :height 32}) + +(def text-input + (merge typography/heading-1 + {:font-weight "600" + :margin-left 4 + :margin-right (if platform/ios? 6 4) + :padding 0 + :text-align :center + :height "100%"})) + +(defn divider + [width theme] + {:height 1 + :width width + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme) + :margin-vertical 8}) + +(def data-container + {:padding-top 4 + :padding-horizontal 20 + :height 28 + :flex-direction :row + :justify-content :space-between}) diff --git a/src/quo2/components/wallet/token_input/view.cljs b/src/quo2/components/wallet/token_input/view.cljs new file mode 100644 index 0000000000..17d10b0a40 --- /dev/null +++ b/src/quo2/components/wallet/token_input/view.cljs @@ -0,0 +1,67 @@ +(ns quo2.components.wallet.token-input.view + (:require + [clojure.string :as string] + [quo2.components.buttons.button.view :as button] + [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] + [reagent.core :as reagent] + [quo2.foundations.common :as common] + [quo2.components.wallet.token-input.style :as style])) + +(defn calc-value + [crypto? currency token value conversion] + (if crypto? + (str (get common/currency-label currency) (.toFixed (* value conversion) 2)) + (str (.toFixed (/ value conversion) 2) " " (string/upper-case (clj->js token))))) + +(defn- view-internal + [] + (let [width (:width (rn/get-window)) + value (reagent/atom 0) + crypto? (reagent/atom true) + input-ref (atom nil)] + (fn [{:keys [theme token currency conversion]}] + [rn/view {:style (style/main-container width)} + [rn/view {:style style/amount-container} + [rn/pressable + {:on-press #(.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 %)) + :placeholder "0" + :placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) + :keyboard-type :numeric + :max-length 12 + :default-value @value + :on-change-text #(reset! value %) + :style style/text-input}] + [text/text + {:size :paragraph-2 + :weight :semi-bold + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + (string/upper-case (clj->js (if @crypto? token currency)))]] + [button/button + {:icon true + :size 32 + :on-press #(swap! crypto? not) + :type :outline + :accessibility-label :reorder} + :i/reorder]] + [rn/view {:style (style/divider width theme)}] + [rn/view {:style style/data-container} + [text/text "[WIP] NETWORK TAG"] + [text/text + {:size :paragraph-2 + :weight :medium + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + (calc-value @crypto? currency token @value conversion)]]]))) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 2d1e6df19a..c86a3a0eaa 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -105,7 +105,8 @@ quo2.components.text-combinations.title.view quo2.components.wallet.network-amount.view quo2.components.wallet.network-bridge.view - quo2.components.wallet.account-card.view)) + quo2.components.wallet.account-card.view + quo2.components.wallet.token-input.view)) (def separator quo2.components.common.separator.view/separator) @@ -294,6 +295,7 @@ (def url-preview-list quo2.components.links.url-preview-list.view/view) (def link-preview quo2.components.links.link-preview.view/view) + ;;;; GRADIENT (def gradient-cover quo2.components.gradient.gradient-cover.view/view) @@ -301,3 +303,5 @@ (def network-amount quo2.components.wallet.network-amount.view/view) (def network-bridge quo2.components.wallet.network-bridge.view/view) (def account-card quo2.components.wallet.account-card.view/view) +(def token-input quo2.components.wallet.token-input.view/view) + diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index e8f7597f36..c86dc735e7 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -51,4 +51,5 @@ [quo2.components.tags.status-tags-component-spec] [quo2.components.wallet.network-amount.component-spec] [quo2.components.wallet.network-bridge.component-spec] - [quo2.components.wallet.account-card.component-spec])) + [quo2.components.wallet.account-card.component-spec] + [quo2.components.wallet.token-input.component-spec])) diff --git a/src/quo2/foundations/common.cljs b/src/quo2/foundations/common.cljs new file mode 100644 index 0000000000..2ec1f7ad96 --- /dev/null +++ b/src/quo2/foundations/common.cljs @@ -0,0 +1,5 @@ +(ns quo2.foundations.common) + +(def currency-label + {:eur "€" + :usd "$"}) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 8c6ce99bab..ad7b644fa3 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -105,7 +105,8 @@ [status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover] [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount] [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge] - [status-im2.contexts.quo-preview.wallet.account-card :as account-card])) + [status-im2.contexts.quo-preview.wallet.account-card :as account-card] + [status-im2.contexts.quo-preview.wallet.token-input :as token-input])) (def screens-categories {:foundations [{:name :shadows @@ -408,7 +409,10 @@ :component network-amount/preview} {:name :network-bridge :options {:topBar {:visible true}} - :component network-bridge/preview}] + :component network-bridge/preview} + {:name :token-input + :options {:topBar {:visible true}} + :component token-input/preview}] :keycard [{:name :keycard-component :options {:topBar {:visible true}} :component keycard/preview-keycard}]}) diff --git a/src/status_im2/contexts/quo_preview/wallet/token_input.cljs b/src/status_im2/contexts/quo_preview/wallet/token_input.cljs new file mode 100644 index 0000000000..13827b803b --- /dev/null +++ b/src/status_im2/contexts/quo_preview/wallet/token_input.cljs @@ -0,0 +1,38 @@ +(ns status-im2.contexts.quo-preview.wallet.token-input + (: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 "Currency:" + :key :currency + :type :select + :options [{:key :usd + :value "USD"} + {:key :eur + :value "EUR"}]}]) + +(defn preview + [] + (let [state (reagent/atom {:token :eth + :currency :usd + :conversion 0.02})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view + {:style {:flex 1 + :padding-horizontal 20}} + [rn/view {:style {:min-height 150}} [preview/customizer state descriptor]] + [rn/view + {:style {:flex 1 + :margin-top 50 + :align-items :center}} [quo/token-input @state]]]])))