From ce29595f25e5fdf3665376184d568f1f885aa176 Mon Sep 17 00:00:00 2001 From: tumanov-alex Date: Tue, 18 Jul 2023 12:11:37 +0200 Subject: [PATCH] # This is a combination of 10 commits. # This is the 1st commit message: Add transaction_sheet Add locked input component, tests, styles Add translations Add duration icons Remove extra code Use theme from context Add missing code Update styles Update gas icon (previous was not reacting to size change) Use text from components instead of rn/text Fix styling for transaction sheet preview, locked input & account selector components Fix purple 50 color since it doesn't match design Work on PR suggestions Fix style to be pixel-perfect Comment-in tests Fix style Add docs for locked-input component Remove extra code Fixed design discrepancies Fix font-weight Fix purple color in account selector Remove unused icons Fix linter Fix tests # This is the commit message #2: fix for airplane mode # This is the commit message #3: [161108] Optimize message styling when there's multiple mentions on top of each other (#16505) # This is the commit message #4: Fix failing mute till test (#16453) # This is the commit message #5: fix navigation to community from discover communities screen (#16702) # This is the commit message #6: Update version to 0.162.3 # This is the commit message #7: [#16703] The display name is not resolved in chats for user sender after relogin (#16704) # This is the commit message #8: Mute community * mute and unmute community https://github.com/status-im/status-go/compare/dfdaa722...e6187aec * mute and unmute community and all community chats https://github.com/status-im/status-go/compare/dfdaa722...3abc86e4 * updated statu-go https://github.com/status-im/status-go/compare/dfdaa722...919123e1 * refactored mute chat drawer https://github.com/status-im/status-go/compare/d3e650d5...3af0b17c * refactored mute chat drawer https://github.com/status-im/status-go/compare/dfdaa722...3af0b17c * fixing mute channels * fixed mute community channels * update community chats mute status https://github.com/status-im/status-go/compare/dfdaa722...dc50ac21 * added mute and unmute community toast https://github.com/status-im/status-go/compare/dfdaa722...c06f7a6c * unmute community when atleast one community channel is unmuted https://github.com/status-im/status-go/compare/dfdaa722...e691c475 * updated status-go https://github.com/status-im/status-go/compare/b2e56f5d...c52718cd * updated status-go version v0.162.5 # This is the commit message #9: [Fix] Scroll to bottom on editing message (#16630) This commit fixes (by skipping) the scroll to the bottom of messages when the user edits a message and sends it. Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> # This is the commit message #10: Refactor `Bottom Sheet` to use Theme Context (#16710) This commit updates "Bottom Sheet" to use the theme (for theme provider) provided on the bottom sheet args when dispatching. This will ensure the theme is passed down to its child components where it can consume and render based on the theme. Changes done: In Bottom Sheet: - Fix Bottom Sheet to use the correct background colour (neutral-95) for dark mode (as per Figma) - Fix the Icon colour for danger in light mode - Updated Quo2 Preview to provide an option for the bottom sheet theme In Action Drawer: - Refactor the Action Drawer component to consume theme context Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> --- resources/images/icons/gas@2x.png | Bin 527 -> 0 bytes resources/images/icons/gas@3x.png | Bin 899 -> 0 bytes resources/images/icons2/20x20/duration@2x.png | Bin 947 -> 1065 bytes resources/images/icons2/20x20/duration@3x.png | Bin 1424 -> 1756 bytes resources/images/icons2/20x20/gas@2x.png | Bin 1006 -> 809 bytes resources/images/icons2/20x20/gas@3x.png | Bin 1524 -> 1234 bytes .../inputs/locked_input/component_spec.cljs | 24 +++++ .../components/inputs/locked_input/style.cljs | 20 +++++ .../components/inputs/locked_input/view.cljs | 44 +++++++++ src/quo2/core.cljs | 2 + src/quo2/core_spec.cljs | 1 + src/quo2/foundations/colors.cljs | 2 +- src/status_im2/contexts/quo_preview/main.cljs | 10 +++ .../transaction_sheet/transaction_sheet.cljs | 84 ++++++++++++++++++ translations/en.json | 2 + 15 files changed, 188 insertions(+), 1 deletion(-) delete mode 100644 resources/images/icons/gas@2x.png delete mode 100644 resources/images/icons/gas@3x.png create mode 100644 src/quo2/components/inputs/locked_input/component_spec.cljs create mode 100644 src/quo2/components/inputs/locked_input/style.cljs create mode 100644 src/quo2/components/inputs/locked_input/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/transaction_sheet/transaction_sheet.cljs diff --git a/resources/images/icons/gas@2x.png b/resources/images/icons/gas@2x.png deleted file mode 100644 index 688640dd9b4ae6dc09cedea811bb55582f523b48..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 527 zcmV+q0`UEbP)$dqpc5#84lGv?I&eBj36x-WKsvx3I8qRv^#gQp{NtN>9!AnWEug~! z7*d$1O|&MSBhkA092=la+$K7nipJ^2IJ-7qNHEYO8VDKTHa{kg2*3vHah!yae2I~o8fm1VNn1~}DKQ+_gB#_$QAk6H742MFj8NjTMsgHujB6e zsaf<4BndHB|I&S6U2NjU#1)BKfbX5A>g8&fN9r~+(Hl__x>ZeB>^9v{SrwyO+k_>< z`_u61wwxWIyqnFAS?nfyb`w3jiJmP@Jm@+Tb$s~wwLiS#1rMzP`KOhssJx+$GrTYB zS782WT!uUpD@=dm7;JFmN+xm)Dd7LuQpm=sA4vF7mzYMOJMc8rc?H_y{{YYHc$7}< R#ZmwO002ovPDHLkV1iJp;}-w` diff --git a/resources/images/icons/gas@3x.png b/resources/images/icons/gas@3x.png deleted file mode 100644 index 67da2c7315e2aca7ee822a49abbee5723e061571..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 899 zcmV-}1AP36P)8rHh(p9%;EOwYkelHHL!Q5NaY9HAGDP2h;~(%SeGlOJvcTYq`;K4?9k^ zoIxHMbnZ=VNAlrM-qvjMH5X^Zu#fWr{18L#+1m`7Vo7-4{pk%aPW^Ru`J zg-8sU#2nd#_{-9cZPqIQpE2A7b@mzA1ocJXBjkL!c70G=xDYWb)J(7=5nh+{P==N{ zYu^Yubow`BM4=EdtJ^ChK#xwbw^Tbu@98^4@x%n8F^+BkAS|_KzX5gy(F|32uQ7a0nt1Hs=fu zCoT-H&;lVOJ9A1`9eMu?8sLyUGKYMO z8o_PfzJWszEiO&I3HP5I5n^s!KkhH!iO`b0F?u4Qp(hd=dLp5rClVTZB7q?dg~-ad z9#-f^#x)n7_n{Cm4*jK~n#_aI$ih3xgR?}rE+DG@TC(%cT;Es961 Z{{eg1EBxnBKJ5Si002ovPDHLkV1nvlii7|F diff --git a/resources/images/icons2/20x20/duration@2x.png b/resources/images/icons2/20x20/duration@2x.png index 752a036b8da73cc7722bb79a0dcaa86047b1fb8e..6fd0f27dcbb6c5f729a158fbd9c49f6cab6f8a79 100644 GIT binary patch delta 993 zcmV<710MXd2dM~7vKPesbXg+QYK$u2M9wK zrG*5`gfMhbIws^He*vMQf;e3oh|{Hu`2+KsVPZ?my^_{mdn`+`Gy?-ZGakvS)$ZA| zd(Yk#z!d*D7^H-U`c`pN`M$Z?fCR`uYG5Zp4)_{))^f`7aO|07Zh5?wcPKOw7e zaB`yT2G~v0G}@2=i3k#@ACOt&z$y&57ErCpfuClt-5KsLmV%GgUzQ#2SW-~~>D9u__`d!emw;N8mx02R%HGbC zx;N+-q_g?GM*@p|N z6KM^0AY=5Whm_keVL}|b@A4Ym~^s|nreFzWQ)D41$MOh`7Oq4LZ9C!``PdL&d*&#*@LVCWR% zG|aork$-xA)J4URB`rPBx0b{+KT_LXA5aczV=O_GoPt7lRs$k}RKqFUp~w_#mj=ju zLIPM;_pVIy`-(>prSBOkDtQ4BFxtrZt_}9wuwP<%Q`~29A0N#jDi~ZvsfN~(8&YlM zAi&6R(Cz+vPJ9I?0g^e!%W;ruaWPgw1`7F-cYn{F8Hk9%XdTx+)57YERj>n{mbiC- zUvq`h3{G(Y|7y1i3z(IBJcR^66UW>T++BsT z?0+M(8n{D6vKbtqA!Wt}b`UGom$ACOy+&>LuyyHLWNgjM{a#YvPT z*+&i&SeoEaHP>#fZQb5HFXD=j)@H1v2SL}DpR^FITEeJvEQyr!L z4!~Rad_hF<(!g^@6VEJP{4(6~$U9kC%38#G+h5cjW};&!C6+2smJPAI(ck_IE5>0y z(ZSs#N(rrNxcSkfSc|-r?8=(pD?@6ZJ}93XOwW`yZIxESPajiE@u%?{lk=8ok0I2b P00000NkvXXu0mjfB*^1V delta 874 zcmV-w1C{)#2(t%}R)0uIL_t(|0qs~#Qq({c{yGU5kkT%<%vd?XZ~})D04LBJfGd|| zP5_=jmhONPFq{B9fhom(m!&dFChdE40s)eq>14Dl;j4n_OuApby#F`A1O9Uew8WC^ z^lkUQsk0$kAV5oufujjqS}DQ9KaSQK)W9l#3g{mF-!b2MuYWbNQ_KLZ3663fTa;a? znJ(BYT77Tndj%T%hm?{0g>;iB^+^nAPs@sJL!x`A;T?=rlAr;c35GI?JdC$VTd!Qs z35dN6{=k)}6Tt=fe3LX4-_q8QwM0IcWMtZF!5(QfTf?P>uR!>#c49X3q!OJS>h(S?#DS9_2395%4cUzlFeEYdNPgH>cD4N#`ViC zZ%sO5^+A4Xf$@p)IgvbqzoJy4&;m^Ir;!=arP2siY=L8~Bpj_pKxp`@ZOJiMMhbr; zzm(<~4PbnxFm3l88o&fdwXf0laUtL4HnkcQ$kvNB=YKCWAV=hnSM zPOp&Nb0Wy*Db^aosVgx)rwfz4rDh_o+soA_UrJee=0t)4(#p+~$#vJ+=gh-#dall_ zdCn`9#(xW3$m%^6pxo3boshO8vl3L7gAJFnV~9$ELG@;+B7=K12di+dKJ8MCrv3h& zYhZ;4k`bmP$im6dx$~eVG>hN>o6p_G*mOLXYgO|?mMGSFaELYhF6@ZlgEi(3&;;d1^MA2icJ2Y|;8N$U-3-;>n2fE=+S{Ln zsaXcsXmcghq&jaUXi|m91?Y%OeblyLWf?_{rq>=co%U`ZEVV}5wud!k$p#)1$}K<3 zoaUTA&8Bqpbr^(CgfLM@Cd#(v!>5rSKKqc4l(p)x*1T}(jfd<#U-Ea{Kunu2UB^y} zW@EiwHFo-?pE_s;mMKJZckE<;&YZ^1rh|J-gZoRDbAM%UFT-@q+;!g>&I{38Do@Fr z$5dx`o6a+>f50qY0w;~e)CrMetC>XS1MUNU1M>4$+F0wMFaQ7m07*qoM6N<$g3`mc AumAu6 diff --git a/resources/images/icons2/20x20/duration@3x.png b/resources/images/icons2/20x20/duration@3x.png index 7b146e1b8cdfc6a359599d82320b2d08067e85e8..c473cb1037a7c22f137a529e6a229dc47b02f46f 100644 GIT binary patch delta 1726 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 diff --git a/resources/images/icons2/20x20/gas@2x.png b/resources/images/icons2/20x20/gas@2x.png index f209033ce9cebfb8a1eaa37ab3c78c0f95db9bc3..3f7ae336d711f91195199040744078af0caf2e8f 100644 GIT binary patch delta 736 zcmV<60w4YE2dM^-Reu7$Nkl%Qnr{^a`e;T|V<3A`A=(_#J zZ`c#QY@r;}06}}S#-hjWS&L@Osm9zl{RY;t1eLXw24`N!x<*(_^{6!F>${ zOD27yKuvkp*57f2666Z(y6+uYT5c9z3@MB2(R>L34J>w|2823z1d7C0Juz2_*wOZUuEP$zP2 zBRKdNFS6^NA4b4L-4UpbVZmyD_TI#9v<4fs+tpa0?TKk#*D;{e@Ai71A%1WPdf%S79F;C#i*n%bkuE9+_Kk zm)v`SW?RhRug$+X?7xo{5z1mH5Q7qR#eytxeA3Jb`aZvRlEo90qe=?gDmS?CYpDAY z$sDl`-;&p@2_zQ|PYupRei4r|Kvku!Vl`@pmbOuNJU8X%vN5t7X|v(u|xG z0qid(V=EOXzRVxfxY?3|q3D@PqgVos)5;ZFuqEx}ILo8*Emq6=(1^2>uJ&W z$_1vAG&kMkK8wB_W~8#pw^-5$Puiws8Ac+GlUeh#tnoWJ>f%IwpbJ-P&c9v!k=M)g z&7BBLFgcy}_27f72RC8u7K`&@yHJ48$A;vZMgM(~|5uy&MAkfAX6@PYQ1}aH1RxaG SwIQeg0000G|pD{R()-69+3p z%(?5Tdw?LmJ8*=$`@Rrp32co({6B&t2@Hs|4@ka(+_S*WLx0%bq(OlT1?+IQ?;sqJ zP%g@`6c(cWTmNQ^29PUYm$s52{9$O!1FTC1DI!RJnTbW(jdl@hI)*Rde4Mnk^_%?7 zXp{FO-T!oXZ}8B0idM}@=Ju}829);n59oUR1tsy4_fFFJsZ-T~wfKS|+Dpe0oePx2 z3pm4ce23}YDu3GTSmViJigqeTK)IubmAsKcj!%X?PIy@#P!rbjtHf&=c_S)=UB{dt z`>2T}0VSBLM?X;+Qs{wOM4@aw1dh{ZQpj01$7b_1$n^w)iiqX{76x_-W6H}1#(yca z1!q_#pt%Cd9!v4A3i3R8i;{qm08aI#Fj%B_PyjO^tACUSt&J(BoU|K{$;SK+Iw_s6 z93)}NM2KRLre>NYMO-K$i2g`DPm(+@)(S|T_>JNqF=Fl=l?RzG#@PHu;X?hAvQ0DE zUnwA=U$WTIV6I$45l|Jx^ulO2b`xzUv+RXb>SP}R*Vr1WPH-K;5)z@0HBLj73|A3= z3I!$Lj(?07INvg5CS)FaAv$qwtINgAKk_te!r()hw*7l;)qRFjm zkhX4UYKNXr$aBx<6zt-ke={ta-?|MhLJNC9Eyd8L$8{A`p@24+i;9TiOtU%~PJJ<+ zVm&fj+*A)iUOG!s|Nx#k*C4h)iBLX z7k^iy=uMDUQKz}Eugk1b&^6^ibMsIWIRaXT5g*xKZ5`O002ov JPDHLkV1m4{yhs25 diff --git a/resources/images/icons2/20x20/gas@3x.png b/resources/images/icons2/20x20/gas@3x.png index 2f0ee84b92c6dafadfeab0b9a46601ee8344685a..e69614cd95a9aae5ba0ec0ac9aec4a45c8133e31 100644 GIT binary patch delta 1165 zcmV;81akZI3(^UYReuC$Nkl756vn@sPHHR|D^aT~t85tSR4GJ@2+fHd6xq}wehkqKX!lg9Wqf5MaDSW&J zT5Ps8Xk0fn7fV@}_vy#0uIsdrFf$20V*ga70DF|MxQK8CRX^+gSVMwLCHScAl)K1Z zKc%S^~I?X7@AGLo`U3fk75`1X6amSC{F}?w(+(F?I5)doU$_F~I{*!i) z0C~hj#B%JF&3|pu9ieh=L3dUka*Wm^j>WI-pDP}`ih@-&uPLJ0gD!COeax9yU0TL0 zKOA!##s1ElcIq=Y9NRvP4Qx2PooaB8uAOyHIFrsztV=J^8`A?XA#_9M+!J*3=a z$HCneO83zDEElrdSN5rcbbM>09A9J$_mKN2ut8Z4=7JGZ-u9({-m@&W0c;9TV zJ6daZn}7NL6)shZw#|)^1+(F@`TcMAhczTaz#q`!TcV^FY@&UD!On3+L!9zS(+|X+ zhm%AEy@Z9a4)CUalRdzyn3nBNiFBUkLgO@z(}sSaPh_WMKIxt0X>1NG;1MmX%I1EG z|HquV{3#C4PH_X`Sa??io9$X{kNNLA90}v%K^~ivTmSyIJWkzAHxjj`D{^t8%`wv+P25*%-hndxTjHN#h z9i}5)Yu7^GQdG};}+{MylVP;8c zi51O%Z?p;(UvO+v7kEfTlU?=#%Ry5mGk<9j90+nmbRL$CDM*80y@>s}L2~~Tdao}q z1*x#Gc;!6u0l{WrAP#9x9$q-X{m84M;^i=@iKTlzCFYT=XUnp;TA=fKth}I%iElwt zW8wTl|5nY?un4`z%PX$Sh;CiiwMJ!(SMUNV|+JAq! zw>s%Msd8E}J>`mB$4?k8Nk$}#tW)gA%#61ExkRc80K#9jzNQs_iA`3u-0Ngz+Nek= z1_{6_hML3g<;F6#;7N6-*+@>Tkd5JSFdb`P7Z|+oo*yxO)~d6#hWUjS{D0cGsEMV`kS~)DzS`f#Va@ zJwe=6mribApCIlDlAIv!38I`JOzp0VWX82pQ$*e)Bol;43bF}Vp6Hvg`6B|vhX*{o z_YuGnODwU(9fH6O5k+ythZJdC^}B+SD_BXSOe7WnGZSWl|9>NWrhqLf-XltpTS-BL zRUZi6C>1!WZ)4UDnz0XZqJkS zRKoRS^$-n!_Zb3e_;55wMZ*6Bh$urA34~FAEY5%@)l)zu_YnR(uQ}eC_CP?xSe3{M zN!LeRgooE@WPdl>*rQ%PC^}HZUy#0}lU>XKjTY9{O+Ofqw=x8)Mh!VZs`u;!o)I+v z$WE&Ca4SxR>!4Bcn|Ut;o?;GYwDA3C%l1Z>@G@pXpI@ic?f&f$mA`qt2JFaqjNw2wC^2uEFd=YK52xIJVb>`TJb`C4IW6Pm!b>cy>r~13TD2b7 zOrn9X`SPMs?L!ADqw^S!&^|`IEY(EU><604H4rXdE=rAR7gYDh;>yj!nk*`!KSk?1 z-ZqhLTz`j)MyXHm1Wq5#>ruMd2-~tYM8ofugn4~KsZsD2=ZeX?8wsyQanH0YmG2Y5 zT|O31sdzPdRO#`j#?pCl%L;9Ra$}h

!Hbx6~n2^7nx}J$VpqaBZ)~_h}SVc3h|W zX1<_bA;=q5V61ZRd7aW>W2AgYX+=VuWeFqTyMM%`qo7bmK=ltDo^!G=_2RGhqxBu+ zfk8k*KzfZv2~ar-SJ(NRNUEf2s?=GgEjSS-qFegNmQc7kRAj`^H$pID2RRa694K@o zPbA~c!S^(ODef<2c43X*nSrn#hIH)nGR4D@9ZsQi=((PiUSxXHkkk)WKtM`}*wk6r zEPo=P#<@)Tl*J|Ex_P9ehO-*IEjgEGm7%Z`VRrlf$HfNu0?uWH>a)KRfN>YO}> z=4^_OA`d*OVdvT=oC1%`trn1=d(eg^zvJSflQKT}g!C&Gcp zwK1!$o7GXgAPM&|3x}Gx2Hk(QO6n)_uOC-%%GVu}2Y4i$**f(VQ5v4lIcH{_iiYoz z@ep}>RdRG>6ekI4;nrcA!}&ZMSogm}=a7c-PF29diNm=(J%$7Bz#P_KOOq-|S$~nR zm&X(8jBVF??o^~Tl3;gNC`AnOc)pYHy^9&@s3e?HMZyT*Cg)ju;0Vl254%iaN|{TF zwk~l!I65uik+8qctU|ToVWn+8y|l9GmYzSIRuZ-)S&C=Z;0eNW{%fO2rcJKSJnF?% z_hxbBPaPejNv2JV^BCSRFa2AimVdCV7rV%(vqIM?Vxuwd;Tg4rY2KD%(*e>}BpDN_ zRcCga7FNjm)`MGU8AIzMxZTMsELs+(p_W6^3&)Rseg{@>AmjS zr^~_TndcjO<)HiU59-Qe`ulNwpLgY5$iIDTshGgjjcKDThwth)rinhO79RtWYlB?2 z)q>wRSjqB@X=*dezgkppOq=I!yl-ynp;NY`_f>`4!cj(X#1U^fT*%F(CbYFPT0gU$ z>uet;NB9@zyoa~7f4Y?o;wtAr9M*nO>?E9SF3JY+C6-uXi93a_wX{*La&f`>00000 LNkvXXu0mjfq!H3l diff --git a/src/quo2/components/inputs/locked_input/component_spec.cljs b/src/quo2/components/inputs/locked_input/component_spec.cljs new file mode 100644 index 00000000000..ddcf0ed469a --- /dev/null +++ b/src/quo2/components/inputs/locked_input/component_spec.cljs @@ -0,0 +1,24 @@ +(ns quo2.components.inputs.locked-input.component-spec + (:require [quo2.components.inputs.locked-input.view :as locked-input] + [test-helpers.component :as h])) + +(h/describe "Locked Input" + (h/test "renders label, value and icon" + (h/render [locked-input/locked-input + {:label-text "Label" + :icon :i/gas} "Value"]) + (h/is-truthy (h/query-by-text "Label")) + (h/is-truthy (h/get-by-text "Value"))) + + (h/test "no value" + (h/render [locked-input/locked-input + {:label-text "Label" + :icon :i/gas}]) + (h/is-null (h/query-by-text "Value")) + (h/is-truthy (h/get-by-text "Label"))) + + (h/test "no emoji" + (h/render [locked-input/locked-input + {:label-text "Label"} "Value"]) + (h/is-truthy (h/get-by-text "Label")) + (h/is-truthy (h/get-by-text "Value")))) diff --git a/src/quo2/components/inputs/locked_input/style.cljs b/src/quo2/components/inputs/locked_input/style.cljs new file mode 100644 index 00000000000..348c9ec4b2e --- /dev/null +++ b/src/quo2/components/inputs/locked_input/style.cljs @@ -0,0 +1,20 @@ +(ns quo2.components.inputs.locked-input.style + (:require [quo2.foundations.colors :as colors])) + +(defn info-box-container + [theme] + {:flex-direction :row + :border-radius 12 + :align-items :center + :background-color (colors/theme-colors colors/neutral-10 + colors/neutral-80-opa-80 + theme) + :height 40 + :padding-horizontal 12 + :padding-vertical 9 + :margin-top 4}) + +(defn info-box-label + [theme] + {:color (colors/theme-colors colors/black colors/white theme) + :margin-left 8}) diff --git a/src/quo2/components/inputs/locked_input/view.cljs b/src/quo2/components/inputs/locked_input/view.cljs new file mode 100644 index 00000000000..d3d06332978 --- /dev/null +++ b/src/quo2/components/inputs/locked_input/view.cljs @@ -0,0 +1,44 @@ +(ns quo2.components.inputs.locked-input.view + (:require [react-native.core :as rn] + [quo2.foundations.colors :as colors] + [quo2.components.icon :as icons] + [quo2.components.inputs.locked-input.style :as style] + [quo2.theme :as quo.theme] + [quo2.components.markdown.text :as text])) + +(defn- info-box + [{:keys [icon value-text theme]}] + [rn/view + {:style (style/info-box-container theme)} + [rn/view + (when icon + [icons/icon icon + {:color (colors/theme-colors colors/neutral-50 + colors/neutral-40 + theme)}])] + [text/text + {:size :paragraph-1 + :style (style/info-box-label theme)} value-text]]) + +(defn- locked-input-internal + [{:keys [label-text icon style theme]} value] + [rn/view {:style style} + [text/text + {:size :paragraph-2 + :weight :medium + :style {:color colors/neutral-40}} label-text] + [info-box + {:theme theme + :icon icon + :value-text value}]]) + +(def locked-input + "Options: + + :label-text - string (default nil) - Text to display above the input + :icon - keyword (default nil) - Icon to display in the info box + :style - style map (default nil) - Override style for the container + :theme - :light/:dark + + :value - string (default nil) - value to display in the info box" + (quo.theme/with-theme locked-input-internal)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 2d1e6df19a3..b87f08c6ba9 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -49,6 +49,7 @@ quo2.components.inputs.recovery-phrase.view quo2.components.inputs.search-input.view quo2.components.inputs.title-input.view + quo2.components.inputs.locked-input.view quo2.components.keycard.view quo2.components.links.link-preview.view quo2.components.links.url-preview-list.view @@ -200,6 +201,7 @@ (def recovery-phrase-input quo2.components.inputs.recovery-phrase.view/recovery-phrase-input) (def search-input quo2.components.inputs.search-input.view/search-input) (def title-input quo2.components.inputs.title-input.view/title-input) +(def locked-input quo2.components.inputs.locked-input.view/locked-input) ;;;; NUMBERED KEYBOARD (def keyboard-key quo2.components.numbered-keyboard.keyboard-key.view/keyboard-key) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index e8f7597f363..2435be3cf1f 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -24,6 +24,7 @@ [quo2.components.graph.wallet-graph.component-spec] [quo2.components.inputs.input.component-spec] [quo2.components.inputs.profile-input.component-spec] + [quo2.components.inputs.locked-input.component-spec] [quo2.components.inputs.recovery-phrase.component-spec] [quo2.components.inputs.title-input.component-spec] [quo2.components.keycard.component-spec] diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index f79ff964059..91dce574c5e 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -212,7 +212,7 @@ 60 "#1A4E52"} :pink {50 "#F66F8F" 60 "#C55972"} - :purple {50 "#7140FD" + :purple {50 "#8661C1" 60 "#5A33CA"} :magenta {50 "#EC266C" 60 "#BD1E56"}}) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 8c6ce99bab4..f6ee60017c9 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -99,6 +99,12 @@ [status-im2.contexts.quo-preview.tags.tags :as tags] [status-im2.contexts.quo-preview.tags.token-tag :as token-tag] [status-im2.contexts.quo-preview.title.title :as title] + [status-im2.contexts.quo-preview.transaction-sheet.transaction-sheet :as + transaction-sheet] + [status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price] + [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount] + [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown] + [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview] [status-im2.contexts.quo-preview.keycard.keycard :as keycard] [status-im2.contexts.quo-preview.loaders.skeleton :as skeleton] [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions] @@ -400,6 +406,10 @@ :text-combinations [{:name :title :options {:topBar {:visible true}} :component title/preview-title}] + :transaction-sheet [{:name :transaction-sheet + :options {:topBar {:visible true}} + :component transaction-sheet/preview-transaction-sheet + }] :wallet [{:name :account-card :options {:topBar {:visible true}} :component account-card/preview-account-card} diff --git a/src/status_im2/contexts/quo_preview/transaction_sheet/transaction_sheet.cljs b/src/status_im2/contexts/quo_preview/transaction_sheet/transaction_sheet.cljs new file mode 100644 index 00000000000..1555e9ba8ed --- /dev/null +++ b/src/status_im2/contexts/quo_preview/transaction_sheet/transaction_sheet.cljs @@ -0,0 +1,84 @@ +(ns status-im2.contexts.quo-preview.transaction-sheet.transaction-sheet + (:require [quo2.components.tabs.account-selector :as acc-sel] + [utils.i18n :as i18n] + [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [status-im2.contexts.quo-preview.tabs.segmented-tab] + [quo2.components.tabs.segmented-tab :as quo2] + [status-im2.contexts.shell.jump-to.utils :as utils] + [quo2.components.inputs.locked-input.view :as locked-input] + [quo2.components.markdown.text :as text])) + +(let [{:keys [width]} (utils/dimensions)] + (def screen-width width)) +(def account-selector-width (* 0.895 screen-width)) +(def shared-selector-list-data + {:show-label? false + :transparent? false + :style {:width account-selector-width + :height 40}}) +(def unique-selector-list-data + [{:account-text "Drakaris account" + :account-emoji "🔥"} + {:account-text "Daenerys account" + :account-emoji "👸"}]) +(def selector-list-data + (map #(merge % shared-selector-list-data) + unique-selector-list-data)) + +(defn- render-account-selectors + [item] + [rn/view {:style {:margin-right 10}} + [rn/touchable-opacity {:on-press #(js/alert (str "Pressed " (item :account-text)))} + [acc-sel/account-selector item]]]) +(defn preview-transaction-sheet + [] + [rn/view + {:background-color (colors/theme-colors colors/white colors/neutral-90) + :flex 1 + :flex-direction :column + :padding-top 20 + :padding-left 20} + [text/text + {:size :heading-2 + :weight :semi-bold + :style {:color (colors/theme-colors + colors/black + colors/white) + }} "Sign transaction with Rarible"] + [quo2/segmented-control + {:size 28 + :blur? false + :default-active 1 + :container-style {:margin-top 19 + :margin-right 20} + :data [{:id 1 + :label (i18n/label :t/simple)} + {:id 2 + :label (i18n/label :t/advanced)}]}] + [rn/view {:style {:margin-top 19}} + [text/text + {:size :paragraph-2 + :weight :medium + :style {:color colors/neutral-40}} + (i18n/label + :t/select-account)] + [rn/flat-list + {:data selector-list-data + :render-fn render-account-selectors + :horizontal true + :shows-horizontal-scroll-indicator false + :style {:margin-top 4}}] + [rn/view + {:style {:margin-top 11 + :flex-direction :row}} + [locked-input/locked-input + {:icon :i/gas + :label-text (i18n/label :t/network-fee) + :style {:margin-right 15 + :width 160}} "$1,648.34"] + [locked-input/locked-input + {:icon :i/duration + :label-text (i18n/label :t/duration-estimate) + :style {:margin-right 18 + :width 160}} "~3 min"]]]]) diff --git a/translations/en.json b/translations/en.json index 6205386ed43..86a0781df62 100644 --- a/translations/en.json +++ b/translations/en.json @@ -738,6 +738,7 @@ "join-decentralised-communities": "Join Decentralized Communities", "http-gateway-error": "Oops, request failed!", "sign-request-failed": "Could not sign message", + "simple": "Simple", "invite-friends": "Invite friends", "invite-people": "Invite people", "invite-people-from-contacts": "Invite people from contact list", @@ -784,6 +785,7 @@ "dapp-starter-pack-title": "Starter Pack", "dapp-starter-pack-description": "Here’s some crypto to get you started! Use it to get stickers, an ENS name and try dapps", "dapp-starter-pack-accept": "Accept and Open", + "duration-estimate": "Duration estimate", "starter-pack-coming": "Starter Pack coming your way", "starter-pack-coming-description": "Can take a few minutes to hours", "starter-pack-received": "Starter Pack received",