From b4d95b240d88066c34c0e8fcd966a214ac0b0912 Mon Sep 17 00:00:00 2001 From: Ibrahem Khalil <33176106+ibrkhalil@users.noreply.github.com> Date: Wed, 28 Sep 2022 13:01:35 +0200 Subject: [PATCH] [issue-13557] Network breakdown and Network amount components (#13781) --- resources/images/icons/arbitrum40@2x.png | Bin 0 -> 2669 bytes resources/images/icons/arbitrum40@3x.png | Bin 0 -> 2669 bytes resources/images/icons/ethereum40@2x.png | Bin 0 -> 1593 bytes resources/images/icons/ethereum40@3x.png | Bin 0 -> 1593 bytes resources/images/icons/optimism40@2x.png | Bin 0 -> 1273 bytes resources/images/icons/optimism40@3x.png | Bin 0 -> 1273 bytes resources/images/icons/zksync40@2x.png | Bin 0 -> 1868 bytes resources/images/icons/zksync40@3x.png | Bin 0 -> 1868 bytes src/quo2/components/info/network_amount.cljs | 47 ++++++++++++++ .../components/info/network_breakdown.cljs | 45 +++++++++++++ src/quo2/screens/info/network_amount.cljs | 56 ++++++++++++++++ src/quo2/screens/info/network_breakdown.cljs | 60 ++++++++++++++++++ src/quo2/screens/main.cljs | 10 ++- 13 files changed, 217 insertions(+), 1 deletion(-) create mode 100644 resources/images/icons/arbitrum40@2x.png create mode 100644 resources/images/icons/arbitrum40@3x.png create mode 100644 resources/images/icons/ethereum40@2x.png create mode 100644 resources/images/icons/ethereum40@3x.png create mode 100644 resources/images/icons/optimism40@2x.png create mode 100644 resources/images/icons/optimism40@3x.png create mode 100644 resources/images/icons/zksync40@2x.png create mode 100644 resources/images/icons/zksync40@3x.png create mode 100644 src/quo2/components/info/network_amount.cljs create mode 100644 src/quo2/components/info/network_breakdown.cljs create mode 100644 src/quo2/screens/info/network_amount.cljs create mode 100644 src/quo2/screens/info/network_breakdown.cljs diff --git a/resources/images/icons/arbitrum40@2x.png b/resources/images/icons/arbitrum40@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..c95ee9c09166fce63600fdd702f3b7809f18eb4a GIT binary patch literal 2669 zcmV-z3X=7SP))JZ0tPDe9srmc3O_K{8}O^Z(d zu$ie*6JPO(3O-WfYK?;N0fP7d1(gLvA!~T<TqV8IRhJ#t;U$O-ggH5@KyB$Z ztzlqmZD0lE3c_MXJ$uqvTY;AaI3exzf6>QAlBt3ZQUwMhG$Im1!XnW5>=~GEoN98F z0!?(Hx>a9$>P1W*myvy~$9$L`v*3dSK}5``QOGVRgnDQMC~(kWc#4aq#kgNnL*IGy zgDRAPUD*{noxyd$qXxq?31#$=?rF?sL{Su=9UhO_Z@!Jx+4%?z3P$7oTJ&^xU}#hf zMovt@E0G$sHa5c4+f8%4sx(rt_@|R5clZSO+^hxeu=*bT`~xv1XAUywy@4T`NOZJ4 z!O7j*arsOsZeJ-!drJ$#v|2>c2Bu7(35B0O46Us&8GAgfXrnk!=62#6m!9_yC$i7o z=UVqKKqP_LNSU1re*$Uj?Zl05&&$8Pq$NiRPz50=BNLM|v*51^#Joure5Xy3tTmh5DLX(8dl&s3rm-$E_E*_V&1~AUh~|3drO6*NW*~J|9#mu^OK%5G9o&b8n>XYXB8nmg zM8wWGhOtxAk&-hTA)(&1t@14luUr z@9LD#SD5LvSz0VMVGMnW_}_uuWTFZW5Xip<2O}kUA_j*9!ffI3{|i^4R)-))t08TX z|BzNp76D~fD($l+y_?9a*S?6n&=aq-esY~8W}!=huXQ0Qmt=X+81-3_;B5NXZs zu1@*s1>T~Tu+cufpBBu~KCsG}pZ6Mmv*tYv3J#Lr@pPK3-|z{RFIhm~v^GvWYHr5% zU56md`~@t*VJ<8C_F<`<;~4#UA%k0pGHA(szg%5N8s=n8N-1dTXJ3#w1y-$CLOh%u zz}Eln!4IMF!1!74&t5G<8dzwFSsbZ)xK|dZZvs{Bo$2J;KBc#AUQb5^t8!X{KnkAF+sq`|M)ku zGSe_^>LmMiczVBX<0nugW}r7jBLkF2GMB>QAA#Jfs(m#gKQVX7rLz}CZRiRL1E`L6|Uv;CJ^Ti<@ zSEOdVyJ9h7q9g4K>zkS=Lib_yJBtw;9cAZlYHq>K-A93xh2SW;tEx}I8m88BO(d@cl6rvz+KqP_upa|N)JUJ8iP)>uyQTbv9;JsCaWLk|w z3D4ofKYonDMfsR8F0qf1w6WpOMc~HHfH8c8{7PU7i0N-Zd|V6RwvJ|60ZEZ8PRxZ6 zkpQpw7#?t>ah>yP=>)MZqz+)1pOfY=##3(lk_^nSa@iu%USGX?_}FPw-L3~e`c*k< zZ6rjEgmQ8o*v0)|6{-}a-KJQlGQ56#LQz?MF|{PNs&-;oLykU!zPN*V_5d) zJZPgdcHXu&1OBsZ59x=XUp*?SoL>NZkdBi(ey2bY zra1r9#RW7`+|DSDsE-<8cZ5N@8O6$I-znUkaH zS}|i4EVnN}p}%F9$aBQK(tdKH!PW{gfuz%%M|*KI07{@iR7%$sEgF0J{|UyD%xK##su zLmWXLk}eSC^Nrb(ZFV zlG0y4OWMzZ7m!rxV$hHXWX#P+LegaU7;AmhKyF}0^oWsiOt;*>gKrKWkT)RsE(0s8 z%S)2oC3&FaWV$>GFrSqk;e!~RCh_COVfx$x3{r>D>B6Du;eFYhtq&hkabSUOVmf7D z=R!}HM_$Vb-{y8$g^owRP&AGw>=b!o38-Pb5Y(CsRVgHK}iD-WNX zbb3)hY`R%qQsj-#=MAfL1FDTpC>BL-h--8I@+59n26Zp2`j!%@4;t7ddU|dgFDN$B z_Gk7_qYi?kn}0e|m8#AnPrmk(0CXg&sfN^3i;%jdII4c)9RCeLD;sDN6=d#nQpNPL b|AzPxD4i3tNU?T=00000NkvXXu0mjf6Qurj literal 0 HcmV?d00001 diff --git a/resources/images/icons/arbitrum40@3x.png b/resources/images/icons/arbitrum40@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..c95ee9c09166fce63600fdd702f3b7809f18eb4a GIT binary patch literal 2669 zcmV-z3X=7SP))JZ0tPDe9srmc3O_K{8}O^Z(d zu$ie*6JPO(3O-WfYK?;N0fP7d1(gLvA!~T<TqV8IRhJ#t;U$O-ggH5@KyB$Z ztzlqmZD0lE3c_MXJ$uqvTY;AaI3exzf6>QAlBt3ZQUwMhG$Im1!XnW5>=~GEoN98F z0!?(Hx>a9$>P1W*myvy~$9$L`v*3dSK}5``QOGVRgnDQMC~(kWc#4aq#kgNnL*IGy zgDRAPUD*{noxyd$qXxq?31#$=?rF?sL{Su=9UhO_Z@!Jx+4%?z3P$7oTJ&^xU}#hf zMovt@E0G$sHa5c4+f8%4sx(rt_@|R5clZSO+^hxeu=*bT`~xv1XAUywy@4T`NOZJ4 z!O7j*arsOsZeJ-!drJ$#v|2>c2Bu7(35B0O46Us&8GAgfXrnk!=62#6m!9_yC$i7o z=UVqKKqP_LNSU1re*$Uj?Zl05&&$8Pq$NiRPz50=BNLM|v*51^#Joure5Xy3tTmh5DLX(8dl&s3rm-$E_E*_V&1~AUh~|3drO6*NW*~J|9#mu^OK%5G9o&b8n>XYXB8nmg zM8wWGhOtxAk&-hTA)(&1t@14luUr z@9LD#SD5LvSz0VMVGMnW_}_uuWTFZW5Xip<2O}kUA_j*9!ffI3{|i^4R)-))t08TX z|BzNp76D~fD($l+y_?9a*S?6n&=aq-esY~8W}!=huXQ0Qmt=X+81-3_;B5NXZs zu1@*s1>T~Tu+cufpBBu~KCsG}pZ6Mmv*tYv3J#Lr@pPK3-|z{RFIhm~v^GvWYHr5% zU56md`~@t*VJ<8C_F<`<;~4#UA%k0pGHA(szg%5N8s=n8N-1dTXJ3#w1y-$CLOh%u zz}Eln!4IMF!1!74&t5G<8dzwFSsbZ)xK|dZZvs{Bo$2J;KBc#AUQb5^t8!X{KnkAF+sq`|M)ku zGSe_^>LmMiczVBX<0nugW}r7jBLkF2GMB>QAA#Jfs(m#gKQVX7rLz}CZRiRL1E`L6|Uv;CJ^Ti<@ zSEOdVyJ9h7q9g4K>zkS=Lib_yJBtw;9cAZlYHq>K-A93xh2SW;tEx}I8m88BO(d@cl6rvz+KqP_upa|N)JUJ8iP)>uyQTbv9;JsCaWLk|w z3D4ofKYonDMfsR8F0qf1w6WpOMc~HHfH8c8{7PU7i0N-Zd|V6RwvJ|60ZEZ8PRxZ6 zkpQpw7#?t>ah>yP=>)MZqz+)1pOfY=##3(lk_^nSa@iu%USGX?_}FPw-L3~e`c*k< zZ6rjEgmQ8o*v0)|6{-}a-KJQlGQ56#LQz?MF|{PNs&-;oLykU!zPN*V_5d) zJZPgdcHXu&1OBsZ59x=XUp*?SoL>NZkdBi(ey2bY zra1r9#RW7`+|DSDsE-<8cZ5N@8O6$I-znUkaH zS}|i4EVnN}p}%F9$aBQK(tdKH!PW{gfuz%%M|*KI07{@iR7%$sEgF0J{|UyD%xK##su zLmWXLk}eSC^Nrb(ZFV zlG0y4OWMzZ7m!rxV$hHXWX#P+LegaU7;AmhKyF}0^oWsiOt;*>gKrKWkT)RsE(0s8 z%S)2oC3&FaWV$>GFrSqk;e!~RCh_COVfx$x3{r>D>B6Du;eFYhtq&hkabSUOVmf7D z=R!}HM_$Vb-{y8$g^owRP&AGw>=b!o38-Pb5Y(CsRVgHK}iD-WNX zbb3)hY`R%qQsj-#=MAfL1FDTpC>BL-h--8I@+59n26Zp2`j!%@4;t7ddU|dgFDN$B z_Gk7_qYi?kn}0e|m8#AnPrmk(0CXg&sfN^3i;%jdII4c)9RCeLD;sDN6=d#nQpNPL b|AzPxD4i3tNU?T=00000NkvXXu0mjf6Qurj literal 0 HcmV?d00001 diff --git a/resources/images/icons/ethereum40@2x.png b/resources/images/icons/ethereum40@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..09e1fbc10894875f444796ffbc171ccb68604f16 GIT binary patch literal 1593 zcmV-92FCe`P)LP01g35BH5Xn=%25MvO85}GDPF%ch$TDDD0tkeYm z0}QkY2}UuHs2CF-QZxcZz@Ui68VdA5TYC0+eeKTp+wF_eYrC_cpQN`pJHOfeb>{b) zIR=-!tk>sire`sj%mr8$gN&76iB=zd4+*eZ>Z@iFRf6-26?*a+xPYk$Z_#fga5-fM zq%5T7RH#wS7``)^`EiAwR^xP#BLxfI4#gXOQzyk&3;h)D;D!XzO)>Xg1-Ix88IrOWT#&QCk9o7aW9}yhIcBDL;RZno!HOiq3Tjew z73<=raIDJKFghXwlf!byhhA~?Hk$8^B($yVCGM4M1z&u+*Ivx}g%|j@vuU+skgu^xI>qEqQ4dRaCV1iw}Hp{3QF zRNhjwDP-Dz39%Z|(=?vg3 zm#y$*boWZs(~|zvE--hd7qJSn&lszvIgr0N9Z=U~AV^h8$tyw3O824i=N_Cm*NyhB zvCC#s*cr0Fq@V|Daszf|v1ZaKLWpXLgYqmCux75MRba=)I23M(N53KQ)tN3___de9 z%z$IGcM02zt>C<3v7c&1KfIKaFJJFdd6gC9tJpT$fJ@=2R2gW^;=2Vw1mn1^(ASk= zd|wr&SsPeVjWf)7)Pn_?K6uE=`zStsb2g05u$qGy++1cGM1E1zZMrDM!=+T(7jB3f zZr`P_bM$1FZEsmrAXv%|aq0J7T>HBpN-$I(EKYfR@G0^D6uEe<7bnkm54Wx0U9dh5 zdD;F^%H60l)Ri0H3+uyvlHk5Q)&+_jIng;`(6yHI${$LZV;I5APlpw((1WcK;u9!h z6$SggY#+D({M8<1yR(o?>>oP68QGKc`e?(%LQv%P9g2yk!ej1R>9F2;N*jTp#$b4V zs5z|Q{?f!Y!Od6Ug5y7Q;rfjcJL|BQRxP9qLHm)SL;A>}(x_xrp-(+b(Yp+aSfS>? z(RPG;q#bHbo(tRel%K<7S;c*aNfGnTwq4D~q>H1El}|-eN;7fwFBh}NYFfgTjw-xk3yV6%9WKDC%-vf|D>hGmZHW@ zoUszx6=dL{!dj&%3(G%9`FuhtIKbNFGc&rBG5!)Y19&i~&Jm@Z0bl8ncM{ts6IMJ# zZ^&SR70?0C^HAJN(`kPLdFg(^!+R?9nXQh;!6lpZhHNhQN=;$`+0i_*rgRMc3_;&1 r;IkIVaDlSI722IumFuZL!3F;UQolT1OdI*200000NkvXXu0mjfjmz|P literal 0 HcmV?d00001 diff --git a/resources/images/icons/ethereum40@3x.png b/resources/images/icons/ethereum40@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..09e1fbc10894875f444796ffbc171ccb68604f16 GIT binary patch literal 1593 zcmV-92FCe`P)LP01g35BH5Xn=%25MvO85}GDPF%ch$TDDD0tkeYm z0}QkY2}UuHs2CF-QZxcZz@Ui68VdA5TYC0+eeKTp+wF_eYrC_cpQN`pJHOfeb>{b) zIR=-!tk>sire`sj%mr8$gN&76iB=zd4+*eZ>Z@iFRf6-26?*a+xPYk$Z_#fga5-fM zq%5T7RH#wS7``)^`EiAwR^xP#BLxfI4#gXOQzyk&3;h)D;D!XzO)>Xg1-Ix88IrOWT#&QCk9o7aW9}yhIcBDL;RZno!HOiq3Tjew z73<=raIDJKFghXwlf!byhhA~?Hk$8^B($yVCGM4M1z&u+*Ivx}g%|j@vuU+skgu^xI>qEqQ4dRaCV1iw}Hp{3QF zRNhjwDP-Dz39%Z|(=?vg3 zm#y$*boWZs(~|zvE--hd7qJSn&lszvIgr0N9Z=U~AV^h8$tyw3O824i=N_Cm*NyhB zvCC#s*cr0Fq@V|Daszf|v1ZaKLWpXLgYqmCux75MRba=)I23M(N53KQ)tN3___de9 z%z$IGcM02zt>C<3v7c&1KfIKaFJJFdd6gC9tJpT$fJ@=2R2gW^;=2Vw1mn1^(ASk= zd|wr&SsPeVjWf)7)Pn_?K6uE=`zStsb2g05u$qGy++1cGM1E1zZMrDM!=+T(7jB3f zZr`P_bM$1FZEsmrAXv%|aq0J7T>HBpN-$I(EKYfR@G0^D6uEe<7bnkm54Wx0U9dh5 zdD;F^%H60l)Ri0H3+uyvlHk5Q)&+_jIng;`(6yHI${$LZV;I5APlpw((1WcK;u9!h z6$SggY#+D({M8<1yR(o?>>oP68QGKc`e?(%LQv%P9g2yk!ej1R>9F2;N*jTp#$b4V zs5z|Q{?f!Y!Od6Ug5y7Q;rfjcJL|BQRxP9qLHm)SL;A>}(x_xrp-(+b(Yp+aSfS>? z(RPG;q#bHbo(tRel%K<7S;c*aNfGnTwq4D~q>H1El}|-eN;7fwFBh}NYFfgTjw-xk3yV6%9WKDC%-vf|D>hGmZHW@ zoUszx6=dL{!dj&%3(G%9`FuhtIKbNFGc&rBG5!)Y19&i~&Jm@Z0bl8ncM{ts6IMJ# zZ^&SR70?0C^HAJN(`kPLdFg(^!+R?9nXQh;!6lpZhHNhQN=;$`+0i_*rgRMc3_;&1 r;IkIVaDlSI722IumFuZL!3F;UQolT1OdI*200000NkvXXu0mjfjmz|P literal 0 HcmV?d00001 diff --git a/resources/images/icons/optimism40@2x.png b/resources/images/icons/optimism40@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..72d25e0ab2b6e3bf1d580afd7d647e6340e39a5a GIT binary patch literal 1273 zcmVanOZ=I30AW zqk_0lG{vulB2mGenEKrcZD`HsP44l1&rMPrZql1rll#Eso^#JRInR0C_k6t(s1u)n zUIDBZLiB*&Kv2=cWt5InI!4KurPOl+h_us#Iv{GP{Dug$NjadDI#48217b9oNZzvk zT4Ix*J%UUuAmwo;hFJg+9dt`{MuMZH7?cXvq1a4d^E1i8YL%)IByxYxmTHwCg*e@A zSqCeXI}+3;72J~;+& z2FHsTtzbdDH}DWh#rdqFRcR!6M8Z`+c{;}N zu5pb_tlT`KbLObT$&<`1b9N)w1{Rt5Lt-Rezs>Ym#QkZ*Ylud-kC9 z@L^k!Cr|M8&>a;KT{|HgDGD#)=jCt@3-M0^7?p&SD+_?kM-VV8Jna-y#U4r@GfmY6Z z@dCMM6g42uCgx3fMuNGQFSYL(8#chde?P>cMaVsU3S-kI%-gZUuJh;-vNvzSw{4pq zh$eXXGP1XCqaM&N#F*f7;bNkwR0@*=0|;KZ0zqpWPX_Q)fJuHev1^xB*|&D>)WAr! zdO>%VVS|1!LZkiNO#_n@8lz>z-`@{|-aG;F@88258bbQwMJO^OBR@Qh)Y-F8*(|J) z5!4G3FDiJeE1Uy82T4}|?I@!{jQ@md<&PpphlMVE+{!EU54;9;Jrs^x z6QqkH4_d+bycT*%MWqIdVUg0MiB&Y|;OYTi+y{j^93xu{S*YT zEkO(M_d%jcs40l9LnJ^Lc4R+POIucqx70L|s$|Xz?dn6}!rv?HSYn87V4-P$Lny^0 jqV#Quk4;PJ{2SsMlR_6sR7cK100000NkvXXu0mjflYLZ@ literal 0 HcmV?d00001 diff --git a/resources/images/icons/optimism40@3x.png b/resources/images/icons/optimism40@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..72d25e0ab2b6e3bf1d580afd7d647e6340e39a5a GIT binary patch literal 1273 zcmVanOZ=I30AW zqk_0lG{vulB2mGenEKrcZD`HsP44l1&rMPrZql1rll#Eso^#JRInR0C_k6t(s1u)n zUIDBZLiB*&Kv2=cWt5InI!4KurPOl+h_us#Iv{GP{Dug$NjadDI#48217b9oNZzvk zT4Ix*J%UUuAmwo;hFJg+9dt`{MuMZH7?cXvq1a4d^E1i8YL%)IByxYxmTHwCg*e@A zSqCeXI}+3;72J~;+& z2FHsTtzbdDH}DWh#rdqFRcR!6M8Z`+c{;}N zu5pb_tlT`KbLObT$&<`1b9N)w1{Rt5Lt-Rezs>Ym#QkZ*Ylud-kC9 z@L^k!Cr|M8&>a;KT{|HgDGD#)=jCt@3-M0^7?p&SD+_?kM-VV8Jna-y#U4r@GfmY6Z z@dCMM6g42uCgx3fMuNGQFSYL(8#chde?P>cMaVsU3S-kI%-gZUuJh;-vNvzSw{4pq zh$eXXGP1XCqaM&N#F*f7;bNkwR0@*=0|;KZ0zqpWPX_Q)fJuHev1^xB*|&D>)WAr! zdO>%VVS|1!LZkiNO#_n@8lz>z-`@{|-aG;F@88258bbQwMJO^OBR@Qh)Y-F8*(|J) z5!4G3FDiJeE1Uy82T4}|?I@!{jQ@md<&PpphlMVE+{!EU54;9;Jrs^x z6QqkH4_d+bycT*%MWqIdVUg0MiB&Y|;OYTi+y{j^93xu{S*YT zEkO(M_d%jcs40l9LnJ^Lc4R+POIucqx70L|s$|Xz?dn6}!rv?HSYn87V4-P$Lny^0 jqV#Quk4;PJ{2SsMlR_6sR7cK100000NkvXXu0mjflYLZ@ literal 0 HcmV?d00001 diff --git a/resources/images/icons/zksync40@2x.png b/resources/images/icons/zksync40@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..d8f30d7d6fbd5e9d547375636384759b5cb8f657 GIT binary patch literal 1868 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 network-conversions + count + dec)] + (map-indexed + (fn [idx {:keys [conversion network icon]}] + [rn/view {:style (cond-> {:flex-direction :row} + (not= idx 0) (assoc :margin-left -4)) + :key idx} + [network-amount {:show-right-border? (not= idx last-item-idx) + :icon icon + :network-name network + :eth-value conversion}]]) + network-conversions))]]) \ No newline at end of file diff --git a/src/quo2/screens/info/network_amount.cljs b/src/quo2/screens/info/network_amount.cljs new file mode 100644 index 0000000000..c125d0c326 --- /dev/null +++ b/src/quo2/screens/info/network_amount.cljs @@ -0,0 +1,56 @@ +(ns quo2.screens.info.network-amount + (:require [quo.previews.preview :as preview] + [quo.react-native :as rn] + [quo2.components.info.network-amount :refer [network-amount]] + [quo2.foundations.colors :as colors] + [reagent.core :as reagent])) + +(def ^:private networks + [{:icon :main-icons2/ethereum :name "Mainnet"} + {:icon :main-icons2/arbitrum :name "Arbitrum"} + {:icon :main-icons2/optimism :name "Optimism"} + {:icon :main-icons2/zksync :name "zkSync"}]) + +(defn- networks->options [networks] + (for [{:keys [name] + :as network} networks] + {:key network + :value name})) + +(def ^:private descriptors + [{:label "ETH Value" + :key :eth-value + :type :text} + {:label "Network" + :key :network + :type :select + :options (networks->options networks)}]) + +(def ^:private default-network + (first networks)) + +(defn- state->opts [{:keys [eth-value network show-right-border?] + :or {eth-value 5.123456 + show-right-border? true}}] + {:network-name (:name (or network default-network)) + :icon (:icon (or network default-network)) + :eth-value eth-value + :show-right-border? show-right-border?}) + +(defn- cool-preview [] + (let [state (reagent/atom nil)] + (fn [] + [rn/view {:margin-bottom 50 + :padding 16} + [preview/customizer state descriptors] + [rn/view {:padding-vertical 60 + :align-items :center} + [network-amount (state->opts @state)]]]))) + +(defn preview [] + [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) + :flex 1} + [rn/flat-list {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) \ No newline at end of file diff --git a/src/quo2/screens/info/network_breakdown.cljs b/src/quo2/screens/info/network_breakdown.cljs new file mode 100644 index 0000000000..2ffbc4337c --- /dev/null +++ b/src/quo2/screens/info/network_breakdown.cljs @@ -0,0 +1,60 @@ +(ns quo2.screens.info.network-breakdown + (:require [reagent.core :as reagent] + [quo.react-native :as rn] + [quo.previews.preview :as preview] + [quo2.foundations.colors :as colors] + [quo2.components.info.network-breakdown :as quo2])) + +(def descriptor [{:label "Ethereum Value" + :key :top-value + :type :text} + {:label "Conversion" + :key :conversion + :type :text} + {:label "Network" + :key :network + :type :text} + {:label "Icon" + :key :icon + :type :select + :options [{:key :main-icons/arbitrum + :value "Arbitrum"} + {:key :main-icons/optimism + :value "Optimism"} + {:key :main-icons/zksync + :value "ZK Sync"} + {:key :main-icons/arbitrum + :value "Arbitrum"} + {:key :main-icons/ethereum + :value "Ethereum"}]}]) + +(defn cool-preview [] + (let [state (reagent/atom {:icon :main-icons/arbitrum + :network "Mainnet" + :conversion "5.1234" + :top-value "10 ETH"})] + (fn [] + [rn/view {:margin-bottom 50 + :padding 16} + [rn/view {:flex 1} + [preview/customizer state descriptor]] + [rn/view {:padding-vertical 60 + :flex-direction :row + :justify-content :center} + [quo2/network-breakdown @state]] + [rn/touchable-opacity {:style {:background-color colors/black + :width 100} + :on-press (fn [] + (swap! state update-in [:network-conversions] conj {:conversion (:conversion @state) + :icon (:icon @state) + :network (:network @state)}))} + [rn/text {:style {:color colors/white}} "Add current conversion"]]]))) + +(defn preview-network-breakdown [] + [rn/view {:background-color (colors/theme-colors colors/white + colors/neutral-90) + :flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]]) \ No newline at end of file diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index f0dfcc11d8..1b49929224 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -38,6 +38,8 @@ [quo2.screens.tags.status-tags :as status-tags] [quo2.screens.tags.token-tag :as token-tag] [quo2.screens.wallet.token-overview :as token-overview] + [quo2.screens.info.network-breakdown :as network-breakdown] + [quo2.screens.info.network-amount :as network-amount] [re-frame.core :as re-frame])) (def screens-categories @@ -82,7 +84,13 @@ :component information-box/preview-information-box} {:name :lowest-price :insets {:top false} - :component lowest-price/preview-lowest-price}] + :component lowest-price/preview-lowest-price} + {:name :network-breakdown + :insets {:top false} + :component network-breakdown/preview-network-breakdown} + {:name :network-amount + :insets {:top false} + :component network-amount/preview}] :list-items [{:name :channel :insets {:top false} :component channel/preview-channel}