From e7878d48ef58bec3512262e8b3c706c02dfccd01 Mon Sep 17 00:00:00 2001 From: okanzdmr Date: Tue, 7 Jun 2022 18:28:20 +0300 Subject: [PATCH] feat: content screens added --- .../src/assets/img/metamask.png | Bin 0 -> 13249 bytes .../src/assets/img/success.png | Bin 0 -> 2315 bytes .../src/assets/img/wallet.png | Bin 0 -> 3451 bytes .../src/pages/Content/components/App/App.tsx | 193 ++++++++------- .../{Modal => Modals}/Modal.style.ts | 8 + .../Content/components/Modals/Modal/Modal.tsx | 222 ++++++++++++++++++ .../Content/components/Modals/Modal/index.ts | 2 + .../SuccessModal/SuccessModal.tsx} | 202 +++------------- .../components/Modals/SuccessModal/index.ts | 2 + .../components/RewardCard/RewardCard.style.ts | 8 - .../Screens/ConnectWallet/ConnectWallet.tsx | 61 +++++ .../components/Screens/ConnectWallet/index.ts | 1 + .../ConnectWalletPending.tsx | 58 +++++ .../Screens/ConnectWalletPending/index.ts | 1 + .../ConnectWalletSuccess.tsx | 50 ++++ .../Screens/ConnectWalletSuccess/index.ts | 1 + .../Screens/NftClaimed/NftClaimed.tsx | 69 ++++++ .../components/Screens/NftClaimed/index.ts | 1 + .../Screens/RewardCard/RewardCard.tsx | 76 ++++++ .../{ => Screens}/RewardCard/index.ts | 0 .../src/pages/Content/constants/index.ts | 47 ++++ .../Content/injectables/walletConnection.js | 1 + 22 files changed, 735 insertions(+), 268 deletions(-) create mode 100644 packages/browserExtension/src/assets/img/metamask.png create mode 100644 packages/browserExtension/src/assets/img/success.png create mode 100644 packages/browserExtension/src/assets/img/wallet.png rename packages/browserExtension/src/pages/Content/components/{Modal => Modals}/Modal.style.ts (93%) create mode 100644 packages/browserExtension/src/pages/Content/components/Modals/Modal/Modal.tsx create mode 100644 packages/browserExtension/src/pages/Content/components/Modals/Modal/index.ts rename packages/browserExtension/src/pages/Content/components/{RewardCard/RewardCard.tsx => Modals/SuccessModal/SuccessModal.tsx} (91%) create mode 100644 packages/browserExtension/src/pages/Content/components/Modals/SuccessModal/index.ts delete mode 100644 packages/browserExtension/src/pages/Content/components/RewardCard/RewardCard.style.ts create mode 100644 packages/browserExtension/src/pages/Content/components/Screens/ConnectWallet/ConnectWallet.tsx create mode 100644 packages/browserExtension/src/pages/Content/components/Screens/ConnectWallet/index.ts create mode 100644 packages/browserExtension/src/pages/Content/components/Screens/ConnectWalletPending/ConnectWalletPending.tsx create mode 100644 packages/browserExtension/src/pages/Content/components/Screens/ConnectWalletPending/index.ts create mode 100644 packages/browserExtension/src/pages/Content/components/Screens/ConnectWalletSuccess/ConnectWalletSuccess.tsx create mode 100644 packages/browserExtension/src/pages/Content/components/Screens/ConnectWalletSuccess/index.ts create mode 100644 packages/browserExtension/src/pages/Content/components/Screens/NftClaimed/NftClaimed.tsx create mode 100644 packages/browserExtension/src/pages/Content/components/Screens/NftClaimed/index.ts create mode 100644 packages/browserExtension/src/pages/Content/components/Screens/RewardCard/RewardCard.tsx rename packages/browserExtension/src/pages/Content/components/{ => Screens}/RewardCard/index.ts (100%) create mode 100644 packages/browserExtension/src/pages/Content/constants/index.ts diff --git a/packages/browserExtension/src/assets/img/metamask.png b/packages/browserExtension/src/assets/img/metamask.png new file mode 100644 index 0000000000000000000000000000000000000000..60a2c7c1e560681e435bf25ae521226b7ea65bdb GIT binary patch literal 13249 zcmb7LV{;}9x86dNvsnmex6YzNvLdNKBV+j*+_JJQ}_+yy3k+3 zcm)JaakJJ%Yu>53xmOuySL-|Pj#r=G&$eeZ6*Y#Il8+@lJX;28kK2{4o9{b5y*}UX z;BK=b&;3@xe&?#rDPYG}0e1q1o(cC*j*&z|zPJV?`CA^)Y{{T@9V9z@9-u*MWvLo8rABMym7};sw`?%a(8)I{= zq8Ytyxl!L^9pxbIXIf>TRW0H7sH;_Mc6`9nB5EX6#1yyfbwP2u`&-f+)AAWHq&p+M z16{=r0;@+641FfQzAYZC!?I2jo0@R_SMwu7Rpt?PF-3DU5k7N{L@xUViD*JC*dN?7uaYYj_yjP<}ju$X^fBX7( zcu?cjMvxCtoIubeE4T|8JjUse(8Zo+m3e-&3^IyM%@^rn7Zrw~;T7 z_5Ru=ai|-gTF)jsJA{aZqf73Nf}d;#P8LST7vH%rLpMgTn_lNQ`bGH(qNeoi{$xAJ zl}L8lJB7PYJ;{9h$PqlO`qiNOOtE(BKJ(B$d1!D&G4VSdci1%WjXqREu401$eVqG+ z7a9x)CclnRB&ND~2JKC@d&K&s(=vSy;HoTqfJSd_^<1A1saw$ZC?@=`sFBrCaZgzD z+<&q^C}jJUZu{<_kiew0O$9|abHE>Z57GqcyQ1kq=R7Vg`c9{L2;RK)+ToFi*Kw3T4)g;L|L(mjQrVx6rPbTI@Qynry<>S7C`PHmPLXFHweB<^-^F6O^0yXDq}g#uAG@2ag{r` zK7%3B>l{*OYP$`3h{D(4wR%OZ7)VR=1gy{WMBV|HuGoa(UfaPxsskx~`BdX4Bs#eq z(OIVC7EIr(=1~g5O?c3my(({0r6$Y&}CXBllmvYUBzx>fm zs%i1K-8biAxL~0!Jb@`SPH6+PRWekwq*6vw@-JNdvp(*eQ^t={6+EBKK!+O0_w#Aj z1KmbF$(4BC)8+DE~t`sgBb^W@*0P?1@MQB4`iMa>_GcCQB$Q_r`=Of~X#VWY9C zsIxO~yVJHs`cP>8ObL6yg|#ZROnp8Bz)U9-!HQNbUw=dvy}z!H6?D82sLmr6;ogd8 zpxtWsIc8W&NY)M=#B_CEZiry40y-3z%(T8pvJVpx_t)K6#(kVLHNt|1RoteImb9ci zetigohsXh5eg)kvgCA&UyysTJuz-)fyjl%}(*dQ_epdUtS$(8p_O*xnA|9=~oqK*o z?@C27HFk88`+aWZK%gk}37J&V&s8K_|55DV1Oq`gS%7BNK^W+t@$f3ayiK}Nb^$N> z1@+X};6L)q4NNN#=II7-FrYH!6`GuA>Ru5ssnv};H3_qeg3tKp z*r?d~M}_Wk`lpHmHSLdlFzG%}ns9%cn82*!T3-c{0VM>0$`-baN0@rVtV|QOoYz6E zlp!!oN~j54g56;Z3XTmWLs0x4J1!FQXXd{!Fu{qZ;dAl(QzLDPW5kar6LOXwUecAa z^%BjXrwyDWVz{vut_k2>gP7IKjC7^SNZ=fPndWwLlE5$Yr6OSl!8F0rNLzDO-C?D8 zyGL^mJ%8da^Vt@4YKBKsgyQTxwjJHuZ&FC)4S7XlVqBJh4x#nKF*T}wmd4v0rdOR4 z&Z4;!Lg!DRz=rJ+w;7+`n|Q%6$mR1R0jsexP@pb=$B?7;YiE79s*p3!+x3Iaot2wx zJc>QS{*xwjW)AS{WOxzCnv?5QbuH3f69;B^PYSjVALkH<^GX>^ZI{+Z(vuO+GS!}( z1O<{ofIeAm@fM_f0LD^Co2Zo4pU=+jTqZ^Y4TtmBQ}g0=dS4~_R7CzJo>MqfZ93G! zNR748pwBHIf$nE>37w1B&ZAeKE=MU7MhM?&I~?qDK!1m=>NaS>D@l_K9szKc9nG0P z8TvU$%g^tns^&HS6qIU3WM*xt7+Db=Eg-9N)KKLZ$8#+;-sfqg7R#oM!K+ET@Gc z&0?B0Zo=X#*{Z1;Z|~4eb5#yvCA1*$6v{tfBXt_r8(V*4YU4F9K;LX4Ic1Q}6-M}V z2P9=D)wuLmy_>rZrb4BqRrpWIg~+DULY&o|P^bAot|KHW<2(&prsqvDQH?a)a4q~8 zqlVM2WObx7Q^-8@WtM&o{mi;_(o6gewvkT+AkMU)Xg6&x+>a+`mvJ>EOi_Cd^!TYV zPp$uxFk+>W8n;NcI^RdffP^`u3S8pnYnliRUn53?aS^KgZe?}nKbrE&s_I1 ze^9`dZWmceEDzSub%k8@2jzpt5pdRF>0Ed#&^(R3;+6llnhI(kln~@yZ6V%EC#>-Q zPK+QCm_Tl=143JGmAZ&X$uS~}a*ww(Fu-TyW;uM|U_r8t6%`GARV- z5NS;v8*Npf`mlmGWFU&LRb0Fb)6`+pPE8dFJ^52k@nBeHUq9mHdi}V;f=uWN3U+D) z8eXW;fHgumH3`<~XRW-U?LsX9brvM9tcV85#ZZymm^FBVjfm(?SVv z9dWLVV&WZFwv!>bj-T~BU)UKn3ZhX7vpc%3sGoz}R}4?LaGgtLC_H?-Wy)DUf;vaM zFU%n)&QpFG>SU?VgaCSe5`9*b-}8$uxrlqlw2*9Q7Q4zvLS*=-!LWGXFs(u&)8$?# zQj1mLFX`FwQWBkg=yjk!Vu*Kv82Fv7%8KIAVXuU8Y`ZxTz`l_NsV^%bt9E z*M>>A*RtSYM#2Df?SOx zIYtTH)t{FY`ctM(kqMae@@f2uXp-3xMOtp0I0f{rPNjo-8N|g72vZavj>)yUztC0W zZoP+^({G&CbPJACA}LM&$!ai+#-Po6WX{0w1i!1q+vM4j$k2fYida5QfoH$p73S@T zrfKB6mY&sW1+jGMkC@c)Cb>xeOnG%0zuygzGJxet4k&4g=kNkaK&Tx}xdwTE6|hve z;5CMxac0SYh_^RPqu+)=N$p?Oe&o(M{+9U#w~q4<$78_BrD~0I<}vLYPkl-}opekU zydVv0b#xx}@0Z^R5tJOD8d_QOHwGpZK=WMAxdNK_nrE+veF&Z&!+}6l9Bkb_i;(mC z(GjlDoq&GGYe;Lef8Jp@(q$Touc)CKh*un4%05}e^)g8RoiXgKYTiTecF9K&2BWTY$awv(P#yJZgz+)T zSwk~4&i5vnnouaG)CS$;sH1*!T;9me9rzm5N&eyh1hVH9eJTW2<-D|zYt&th_T`^* ztD|dHFZ7)ej=EJ>VK%GWw|O{6?F68HFjG+YN+88bTmcZb;LNm;+pl-=s}Bt)0SHq}R$_ms~A78AjP1gL)9(^oLpRMdVd;Vu#|B!{Rc2X-hf-?QG0m zgT(?obm>pQZ~CWPC{(3(u58w!9PgOc0=uVbyCpefB8J?R5NoEJH#FzCLosL z9E4FF1V$sZ__ugJm8F)#qV1!)U!<@hXROmGMRZFe{Bcbn0h9NmWXSS9jz@n}CL5@{ zCYt9xrNm_J8gA;HUCrIpS!cMMt3!xi*~Ie)+3ay-s9eiWrrF%VwKT`gMFzW`>-{{p z##OR>zCmx~*UE`Yih;J2eAQ*c8iexe(ug>cLq|ujy>LWR4Sm^BEsrY!c%E`wOxVr( zz$Duj0T&T3;pO#pZ;wxfQ*T>nzqc6WL!Ldc5Yf=d)tI^VHl9v1$gISR@P_Y)sCDugC zoCw*VL_%zu^e;!k!gA}}LC$jcfIZn;1RnjG58LC|XWp0-PeX3A^tB|}yg5I}+w>L+ z7i$<~Bl40Bo+#{9%Yqy7e>uY(V8R$|?Dm|`A|w_gidItm1CM|2+nPY>7b;fCsnLBT zf*j>bpHyECPtF^KWx$W{d?HrO;CZJP^+!oFItEad*)~2Q(+n5P7T7u}*ro!avk^qN zTD=otCDrm_^F?fM+4f)-V#+Lghhm0xT2P(|!^LqFRPrTxJTsm~tO0YNH zDw8EY#O_s|D2?$uz2bMSp}Y-O@&K%LfQru5Kvj{i=}v_a!^@3|zdp-EVauen4Z`x6 z9YqwQolecA#41a0QxB1eJJWA^tczh~>S8l|9>+-iu+Q5=J`06n{W}@S!MBrlp)H)zhCA~I);KPAS zO-N|b+*sv8eiI7?Mnr9JHVXvjQf!?yw9ZdjL<>xsw@dgJVxs!*OHb$%1XVrF{lzNO zFK?=eWl*4u?X;eqBqV~f0I&Ey>X`-^0o=Q39}CWaJ3gqTi!hUtEkCo2lWDjyuaP17 zN}GuSeZ2rVH zzBv(*^$A|+oS}r+R@o*qIBNg~vRSrkG+M&Tm?UC9P`a^7pI<1EHYH~O`084ISMkH9 z0exWwZRoUyJmW9HxySDMBS>kZxhA2{7x!M2O=$Kg55R%Xhf`J*l8WUo-HZKmjhaw+ zME<37eAgv>gwob}=hkylzzF-a66&JUh{dXK$_H_j^*!rH^kWDE^gs*AuULM29FTJb zZ9`j<6UC9oGy9w$A9M&jaXpNrN2ZP91v0F3|p@tz%l`p%ve zCwH%&*%~5p8F8S-mbAT$(>wEdTsD_XLw8hrHOBBFK)Z2(`Z}AwLnWpL<4ha@H4{?b zd_UtHj(r?+Qt9&CL}6X)PPsr0Rv9+qHOdv4X*r%)4TATN?EM`?f4$AwA?^@gQOw6a z)1AcUn2^7{EgosGG%W&nzEC^OUJ-m63)77<2Hci|WhOlcGtiP6n8a=3m%O1TV%+)AZ^r&(1+*lh)68;aW zBfj}hqsZXWQQxWM6IA5x0RNK^H3xx+0LI@H%ys{TI77(tEZ1HLWXhcUB{ez1<+Ml~ zE~NBFFRr8@z|lir$T-t6S3UJ*0U4RP0~YOi4sECjA6yd zS^NSO$}tUg>aQfrIl0E2dA;trXgt^%f;lv-K-CFD^}QHhGN||e?3?B|&$N?F(OnwE z$W;HEOP0u(8fn?+X?SJBMTel58CFZKjiy@#Gpc23A}>fuT#CJ*px?b;qzv`bV>B2={MS7hEyLll@4 zj4Ewoe&5DX!lY0E(w#sL$lJ)z9Kt{Y1_Lg7Sn6ZdNr>D813Gs31H?qBOq>$HbzvnON{I=!stBcha?( zmkR#am0cbn>r{McVd=t_rDjZLg2^xphNJ;5`S!g=O2RSth)kUz`12NjdQ|QcKxZ((^eh~TA`@0n z8PBfX0$Vk`Ni2wv?gB6=k315UaIeF~&}uYcKPGWdF`01~xJn}L zrxYjwPG+vZyW8uoj;5!aC}B}W4>2rl`8#DpyqWX^?cgmm?+C`oO=z!pyA7Omqg=r7 zDHE}$yqT>Gxv^}vGRN*3Z*joXDOJWd;A!I~FXT&O>B29T8M=4|ig6>|F^-$z zqSTUQ+Q4Cd4v5|k@CdJgi`&GAr%T()QW5|z;?Ph2eSAg%Pr4NUOmViL%F)Q7h(Zqy z3>{Fnl|@x|A*E(B7gwpjM;S$*$Ra;RGMaT z=qi!XBg#LMNCRP7h<(yVIWf|valZmz?N2IH5=*moF-eBUoh@T=JQmu#yr{_%8=GtO z+*1iPR!Tvrp2TJ~5GD>A{pP3;|CA}AHsZ6rY5M*Cy<@^R)11`uDRQ`M-W)bdT;xwk zXhPaQ6w#zsZD`b5-L@m%e(0rnuc541#9%*v+V?wa+hku|r6cPk+(8m$5k<4ThI-TI z1->gG_ZM10*|@TbeR~{`l#W)P0yHs0WNtOvmd z7y{lcM738Lb3%OlNQGm;$*Lt&pnBM8<{Thim&+||jvlQClfwoR0llE8BIX$39wFm} zZ_IMacVJ~PJdkAvPz`n^{L>&gCc z=Mqa3^;z7WZqMuN;t+{-%%%n|6c`q32-si+k(?;x8LdgNb~#ggM`yDa`_gJI*Y+c> z2}k-}RxY8r+#ATH-JXMwdeb*nMp@dGE2VdJyoTZ&rN-$+ajfWT^o!c%Oko|(hR1*; zxHs=8gZgNGDgwj}@B163R;AgvN;aSeyQPclra+?-J?9DS;PELU6s^?Uc|Q)q{lp*& z=)dqp{D>4Z6l|z$53}DgR)g(_7r&zN9eYX_Yi|*nGqjJ+@7!A-Y9hI$i0NSS%L0A4 z-T-fu?M~Y+eHnDs>3IzXE#-<)3ftlVd9ddoLFn{XPKg)%j_3!wwCvEVmB|6+O>C1| z6?PJw^QQt^R_z;_YAb?du+{j1E=}gs{ta#Znzp`aZS;Cr7q*Mc*Ney$pS1cLXY0W0 zZQoRXk9+p%Q~+;g+#H)4&881!9M#KX{~EVq+GYb6#i!1l58}JFcd%e_JlM%E;Q)_sc4NCW`%xz0GQ*!hKxx?=+ zocfS@9WV#;hAFM}0_qtTqQjOV{|21m;Q*sd{moY*;=f!Z=Q*XEYL+U)t>$8EI& zeREp=!`qv+dK$}M90+{dxaD{_)_^WPN;1eGuIeSH8FyP{0C&Mydnq1cJ!;rduvaOX zEK$K0YicJp=gq)#L!_{;V)uozrMn1+el0Cz#>QKliLZf1z6yl@RYo5YscVx*qDQWM z3MVnuFIlWRPnFC)aDFLX9F8W4MB(DJq>S_fKZnz1TulNyH&3=6t(`jx_Ixy{ghx*4 z5B^$La1D?NGILy0j!RHVk9l_Y3({j@gsBMcatA^lz3i`v)4LYvdO(MZ9$hTNy9ANo zsS!6V4>zi{jzKY(1+R=Zr5f&|#h#|N@efnwxY)`h!V6tKa1R}%FpB9LwhU%RpOSPH zF!$++&S zjwm~pv-_p|NqS%L+)|Dj5_5^eCnJCrb?UxOD4AB$^vNQt)4bl`1H%X!8!s}Zj>S0S z6XJC;lg22OcOL%2Rw}@NW3Xx<5EdL8-9tHfwpSf9S#Bg$hplvU4x++VyZ&>nt|q1= zc#Uqo!>L3nS#BNHYJE|l)tFL=8D2_%@;CIjyyKIO6}zAYf5wmZ>CfO64V*Vp^1H@! zE%F=?Y&3`%wN#J`Q=T#MM7Iwvi+8;9gxwqn0YUNxQHQpQO5Zz;im zt3~yQ-zs>ebGN}ZMyx5qZVKhhokZ&KQT6xf5p~<#=h9i142+~TYZ%r9J4QQ&( z&sjUYERM#HQvNb$Tn}Y=~CD_FB|Tx`71R$Cqi73gtnUDw8gV@mfO$(kKR& zEGQd(<%gRSa~nc@$Y4-gi0IKGTyEpe?5(x_s|*!PAksyh=u`w6kp5{H zPid2f;@+Y$qB89O%mHQL;3=wF5A$pU6clQRk4Yb%EAYS+IDe+woSr%7&^pW=-9y8e zeMLz2`trl0ifqut#)j3*_fjj2>@^34rL6==0Reylm>K|uBn$fEGR{3EODc$E{ZJSjTYs(4p8q{U^pELpi zIr0cy)Jd7_ZlanD^0m?nu|G637Z#o*$$w!YY6$D`~92l+@X>RBnp+i?qzc;(0^H z(oIvDa)?m{mLjhx$cnc0&QPZbDt>T*uy{6}7_7`wJDCbnM6W_Te$EC&dR!B-w+4~F+k93jbmct5V<&r&%#!oP825xNDBc4IZ(3`rC&fw~{hlyOJa zQ^wL4gKMrp06ZO%rAxK~Q<i)Ede@qm1NmnjrXZ_9SC^2K6L#4=v;_*4GkG`HW!; zF^h7m+e0x*%Us3BV@2ViSr0fiK^BjsZ+(VagCe|ma`iBS z7FGtC(IXP=E*L1#_Bzg-5$6x|-&1HuF~q46$1DaZj&A*jSUNV`L2C=e7Cw2fu(i#N zEnhj}j%eTo21`{U`cM>talN>{CbZzFVjDD*?ndEgc@IiOtcBYrM^Ke}pQT$66i)#dCW-nm=1k<;f^Cv`?x_GWam4l8A5C|L_FyLte z@gEpKbg07_xIv2*T3qb@Vn{8>WHo6DCz_0p5|jxtH%>jGWHu8&pmAP0urI%#0*Wq4 zXJn9NiQ7NOtdGXy5f0#)oqkm1pSpXalj^OR#Ku#}yZ{+kZ-dwf;QFtUs$-eh?) zCjfH4x?7wofhZ8>Hv^{R(W9Wyk^J360oKocmug9i0&;DPgGDg3i&V^L-S>`HXPz~w z`Ay_$5^~AJvvIWN$a;&4OjnvB1xFUSGH5pYzSnCdyU&2Uh4qD&A63-vHc`&O9d-FQ z8>)9O0o`f41%rZJuJHYx+Fr{ZT8t8&a9=&6t(%Zuk;Ln&Cj2Wo7V{^d{_SRS>~_`e zbLs+rJu=|Pb*{NPE!(qyux7yV*fBOS=3@U`9pd-p^cQ*4$FV@A&C*{friW(vzGOkZ z@|G0qhpuwj9S<`Z2NY(4HFevJmVox$RfP{`|M|$_;+rL4+S#NR%5oGDpG$2v|1NZl zUGRC}j(C}POvE%@vkK{R(8E&uB}>Y#m#K&4;=bi-XJFg^b6g=<5h-}37xE5&TUIUY zy8|!aQ|i{|YNlVyC{}E{v1D*k3Ep2`M*FA-g2J>JzBX$3wI4OO*S|izV&lZ*3^S5? zeSY9#8}Us`NMxqLI(K+^tHH7_|I+rCSDASSww=2;E*k87`^SfliKSuy7^v1NW;Qa` zr8v{eC%(+{50D%@lHLGxDnF<|;2;#4<@9df1?o+ap(JHAuA1HVIBJ=_lhco3WyB(D zb(3NH##^r;p*4ZwL=bUw^$BQ^xPqM9z?UNx^WIgN-%9V#l~b9|x-egS3#x z@cqIDkct3R*7|u#17M*P5X{XR=3y4;60tX)LADpu>`2>HxmzqSL@GgS?EZqiHV}!V zEH}c&XtA+v&u7ayFiVQ=5*9GKv*WqaFFnHa&+|wp2l>WR z^CTx6n6fvE&78@`MOsS9}pMVaJjwr&HKDVAxtg4Eb4F+mIxtSkr{jp8u8*%U{^;+ z-@bP*Y$BQ0bxpW~TJj=%p3?TRY2`6#?=fKMmL{2db3&=51WVlO&0|;>ObxK=6v%B7 z)rC4W$^O;ikc|=@B0E^cBynm&0_{@FoQFZ(S=^85W0mCB?Sk(l*m;!L{KRh!XAQ)Z@wzbFzAcM9xj;MhicI@ktE4?O;RVs1M=e>`T&kcR<)sEpb#U>|b zU*(&xL&`tr6a6)XXGQqx(`+FP5jLv0f}pZZTTHJDddVm`YCW>+>8#K1qfSr?H73~XEgX#qF#%XEHw6#=&lG@3CCJ6h+b&jHQz)mU7sJ{YY(9hx_M2hjG}Hk#e6!nG+sgz6V`vlH4GS<>UQvdY8;8aSzOgl`f=SDb_zN?_`7V&+w|{ zPgYdBq~TZc?`KfKG=bZs_aWqXLcxcxeADM#pDURnxC2Ma+s@12pLi_}YmsN_2Pypy3>hj~ z1|`?9l&ik}PAfiw9|UcGP!c&9AHk*1mtB(*GD4idNa18kcQNGV@99;Mor}J2zNki? zF1+i$nnE@ldkuJn1gV9PeJ_=SYBkPJ2#j|6?|jt?lmV9BToknXK9}k(eMQTtMZ6HEZJeAFvL+-1`)VVk zwbKjpwBO+~7Y#m?-**B1Fuw*!d%1_qF3sp=n5?U>7HEIE-SJpsBvWcKi%O_9Lo)d=*j=VaGTYLi!PCy3Yr|y$DSSdpYNM z+DvFnc%Y9s3osxLxE{eE?AxMS$yO9ihyK2zn}pe=B>eO9Myx$7V}q-K@ZnynL9pnd z%B`-#8t0N#mNi*UuUHgAZs;mU)slh&i1e-a$79U5A!AL4HdPiblfHqx`(42p5^=@9 z`#ts9_oX|sY>!l&T))Az>L;lt?PqAQ`ALIhVBHSRY>}#`H2UTQ>nn=fHvHdfeqN{( zn0{#itdEPmyiP*TU8ZDjEY8M*XYbUT37x*3X+0OLWNw)l8_`Bl1l#I~8r8)1@cb6x zA0g-fz7LX}6?b@9@R;9&Qw2c{HxX2RJKqa28an?4i5@td;str$YPB`L%w?Pr>iLSx z`hxG-llv1IN&|X{=mZW9ldL#D=CqL*nGOA4bBD%G6ze;6bTvdDq3-r1Q@`WrPq^xu zkax51(xLKyi6SY>{9YF~r{nnX^QR-;>(Squ_t!s7{s#2_W$DR?^!&hmh@Wqn+nh3D z%L~|x0npmohDRcgf|r$4Xi)=lmHyv{GWwzuMfb4Idsp4>m1HcnbtK`_x|X;7LUhZ* zolvAyZ}l_MHDffXa699l;*T-Q4WW^-1Akz=E|UL#rxQKQEcYZ3O2J6IUZeLs1*{$c zukhRN7ZLO!esRN;?!tNO{4f#qrt5Xb)JrAtKS#SJFjEb*alS?oJzs0f3pkp({%&4? nx#Y6`-&<1te@Bzhmk@k(?Owdd5bVE>8xR=@Me!O@x#_P5TF%;Odo3xRTxVSCY=E3JYk+dpKR7zYL#isDkCp%L67<_Ies)|;L zAKFT#mF-q7psLt?Xj7?DvX)xnBtR|_5{L-jAVB8NgBL=QOUUi;eS5civwM4YySJA- z@RLrrJG(PCzxn>oH^-n!(Dk$ikWX>g0nVO~%+t!D4eL zDFF>25|NSwW^pNJpw7gkWG3p9C^tzB)hh*cXCyP0b<2EI356yypbw8rR#*s@fW%4j z70ZHEyfJF6s;++<$s|$?tTYmPxQaxDCD~LII|@alzyE=wK~g~5FeKROU_gUFHJxNk z&NACU_-7|G>+5Ic!i>Xe|416u;mR_;l=eM}ykhlGl@OE1kj&wF{S(y(Mtfja3>!{L%j;3>$KhAiFB$M|q;*T718>F0D7iTii;N*D%RfF+EINR{iA9J#^%jZ{C zp8oHWv-17=1IMs^y4Jj0A|+|$lxJc+cRC3Xv9R%+-kxY(kd-bw6iz<-e>m~Sm+b3D zpZ=b)Bi%nWH~cG;v$mWPJkjxVCRM3$=YlaSqYlV83l)e|{Pn}->9&^EbB&UCef5G% zg3!{+(`|{?+%L}_nFg6q=c94B>sYatm5}SNC$G1PJEF$MC10 zykLLZa~ix0e*F6b${RBKoAE!S%#BanE~->)i6ndz;0d+_AwjCt*42G34vGB5yoZF= zcN^?~YLD+NmKr|rEw#bk|2Q``5sSeg24{<}?nT`{*CDany;hap6OcaStE(CXC>x7QQjMUA@)FzUhK< zdyA?<3aA58DND)>!~m(%-+oq(vwhpQ!d{d{JtWZysBr9?R7+RK7a>xS)gQKG%na<FP#q2V@sKboBYkAvA9liDv01oMM|9Z`J znUpT<3E^o7?>Gu=kM9#>7eo_qBjs0WfD#S8~~ zYXrS|$X~o_r!)@8_)!9*q*_9G&kZm^z>N5wU6>}QzWl|XANLIG2N|~-^vJk(dV^Xd zY+U%jbAQLz(NRdIq1Q?n>Vrg$Xw6C+BueNUwI~|!$-wvNnM#5dA+B9)y!nym{`R8B z(@`Rq1*q!9p{`fbP%ZW!DQBl-H}p~A7`G!WvWvZkL+=c#;tkxhl;?4qtD;>T|XsA)C1)lDVHk(3{m)PQAD47WfDSw z)Pz=rKt{NX_Cg@zeqC9)IL58Q?^t$y_g?2x6!#-=bx~C>X&09(fr;XI^`2IG|5JNC zKlHmFEmasd*+w&P;@R@Jw1AG&VGa>eFOYoRd5LPh0|P^o{(+==Oi%(1rp6N0&60O& zR?s8wr{-t7ae>@=xvYd8A^=*$P`J$iVs*?IC>IPRVEQt8)+=Fwngow;y+nXcVR`1OvKY}@sM8C0htk2G>%5Doql+pG1KY^NDe z9S4CHO|>}=1;dkTkyNA_ASIi@;+R`@nd;qVqNJ+sAc+8}S~E%b9S2E6-9@4q7!!RH z!b8M%#dz-F8HvGBbvrCAScIDdHLr8U=WEHOYYo3Kw&~W*7t)&dyYYatc$e_21d2ErBQL)QM1Bz8Mz7>1*A@X66D7H zg$X7LuKm_LdQ0k9)MnmoElOjNj*)+H=BG2b3e(U;kU*Y z#wsVyOwv)C+J@!SNs>-x_}5unhNhgEP(DUd`0c?zSCAk{1dtHdE?xATD~3DO)rT^Q zTXsQSYWI^Pwoh*)1t9|V9{z<_E4BiZHHqSS z{O@BbPA;|Dri}XUo81#sln5jdiHL)ubgb!mf88J=9k;f* z_xVq+)!cv;`?TA^u1Z={l?0*j|Du4Lq2!Xqto;%k0wa$OR!Q}(`D>RhWu}r-Rm)Ye z{vAZn_4~(hka5~KM4TSQEP)90K~#7F?Vay$ zTUQy!pL3j_>)N^!tCqpwI-(O}ljd|l+f5?w#0$D1HJQ}1X^c3)B;ZXtA@Ob`{R2>w zH&kMXxC-k!T4*Yq{od!tdCs}#FwnThFk)eVr2)p|5Ce$eE>lP`XqvC5Ab_-irYeT9GsZa# zfm|E_VB!3yIO8XA8-W1AK;uYOP&oin4iyPnf{<*tX`V|$z|fYP2f1C&7e}OI0}Nyo zB<-z!{fEe^0g@0fTHbQAf?khH343#KbSO)-hLnJPgsMi$j}? zL7Fjk%CaDdiI|)BtcenFb64eP9r34$A-BsX1lT7%S?QI%#*T43dm~UUOpc*Pm{1X~ z3&id1-8qVv>=?8ZC@AC8Lcoz)nlrX%D{{?sVCI@rCV0rIxUD8Exm^kD2te2LTCFA$ z*)fMF&;W1nTwpt)!mH3|1z~R`M%@W7+#r*9abO4oZ!j<%PU3bqc!X`ay^$TW01io$ z1dKmyTxHOAOJ0E?R!csBf|{5Z9lW?Di-M%BEG91tXE2Gnk3T^7pwBh%#=*I%kU7%am~^=jP6P zV!c=oFFk3PrY9OHEM0II&t^DVoWuY2kUL>zn%pj(SRrqVTr$re@T1<#q&!u;51Wux zvuM*y;rC^O_Jx>#Jp5m?MV9($!^U@iaeK%T)&%%WVWD2Gxxi5E^^@}_jZVHC6^vt* zNg7xg-kjZ*O^i(YbAVCz-g_YsDU0)T=IYhdaAY_w;6{Q&$7n&DS7rsO_I)T!pyj8E zEg#^TfxqhRMr?EbP=ER-?U=>I5MIG?`vkiz)K@An6f-q{JjOy0<&yPFjvhc-VF{t! zr_gVi{n!d$Gxw>$vHC#o<@kn<4IANwh2tsQnL7OR6nya3hxzYuU5;cD&fwRG748jr zW4TT{>7=Vlq6*_EUa{ypYN+eFilZbb5Ah*9bLa`cK2b8OqsOo)2#9`tBnH3y!Lfp8 zf>4fh6qkctcJ%CvWn;)9R=(H>gX=Lm$*u)mEijx^Yq)3=)PxP_|J*S$@v!z@R@SGLfD|b zK7-;6*6N~)KG|x;^AXH8E8fB?cWAxk6kF(H~aEm;gM$^ zHqdp)J3{So6gjcHvT|^^=SdTMfH}3(3SR-!AlOBy2A5$J=z-ch9I}0+_(9b_BgcJT z+t$A|@~IdEjI%GjQQ(@1UEh2VU3O=|zPDbzl$ih9<@e~ZWU{~boKaKM5}0UFZd*rl zuDZCIMq^@Pm=J;=snv^e&;%W9BC;{6A{xe*YwB0m;x-R7jCR&Ab`7|FgQK`q!jn=S z0ZriGOibFncrGYYp|XQG{lqEz1)tfqzb|_4S3f_>+jv8oHI3xP)f*T8@UuUSFPQ(O z1a-ur=P2y9YtS*F!Y-?Z4S7Af@Y^BD#CW6HtHD5~maWVnHJN&ionuaY#%_9^0u^&@ zVL>EXTUdfcv0Xevg^x?-xiPyrT12jjSdqYp`{GBx8MTGg+{Cykun?@Ymk!&<)eaB{ zamivu%MHwPg)Q*t*%7n2-`CAB-G+;M^zuss+F~n$0=J#)-qa1X(ok{9=%|9Ssw=qrLqQcsJ%(<3K~irOX(+!CaToG;70maqZMzXU4wZ zySR3o)%b$1;@a+5$5~J4-qaPYHgv}~acy@D@&IT&ftp60ZFW*x7T?5e54DZyW{PTTkEs^``X25Mq1*NIdBw6JLV9$L@zMJ)7Jd3Vu59bJww2G8V(l zwCCbdG6gG^?zcspgbkyZ-#PpQinWbEd5pz;3^O_)ej?WVJNwO+NE)FW60_eEPm|e|_RgX3)m-go@=3 z-0Cb{T`JkvbI(@ri7-{FJQr6op)EHEbcMYam+7IaHem<1N=>5Td8$;=VXcJqa&HQu zIU)1gxDP2)iEv`zwfXP#F0pqn}7oh9*PRxiO zw*Mvz4=ZXGX>k>@9g7rakNpLU51$n5r}pm~SdOI0K)2lGu86U8)m`sVK3ZIbP$lZ| zpFCPJ7c)WCrWuDKhnMIX8}FM!?$)zwDIWRWLukQ!>>`F=WHN20=Wdxv zo~DWWHHAZ4H`5VHf~GMDx#~5Qh)YQoW7>Kff|RQhZ!4=dSVEowjqh-L7_9b;xLsQeH_cQUBrmln$qt~vqu?Rb?iH3C z28}D|rfizxsF-_pMa<{+{AjG&`|bG+3?mw5taH}s_Df8J5|$7Xrun*OLuaNIPK=|= z@Z9yU7iickS?uiZ-Yj{JZc$nMWI1A*=gexyS)IIsmM`Z_R$BANq`L_i%MRhFm%c~u zi-V>B8pBM}C{!GLEoEsTTH`;)_PgQxiEo>G ze)v$$wTFrmMxmQFu%K}OV{JbsR(e)ApP;(|zliNvx-&nr{caQ6v%9M`dz`3gHZT$! z6!G1|`{G;f+Tv-`s~IVpE^y7l5`miPZR+yzG0s@a3!I}aVTr)aU3u*0#N19HOd0q<)6ZAm3?efL)0U7Eeu=vJxv)-{nm-<69O8kA$rw{<%vfge>bPq6TmCDo zGqUaDP>hy$^?emkD!f?Yh>&dBZ!2~FI_nsk=fCZ?jWI4o3^=ESti0{nLNU?hrqDu9 z;f0h6f}r`d+!`_DzOyT+$SCLR0eet_1Vb`=TR1==E1vCACC%+5Sy~ElQ8H#`L?|`f dGiXA9`9F#-StUeo^nCyT002ovPDHLkV1kZT$eREF literal 0 HcmV?d00001 diff --git a/packages/browserExtension/src/pages/Content/components/App/App.tsx b/packages/browserExtension/src/pages/Content/components/App/App.tsx index 8a26ed184d..e9120029f7 100644 --- a/packages/browserExtension/src/pages/Content/components/App/App.tsx +++ b/packages/browserExtension/src/pages/Content/components/App/App.tsx @@ -1,102 +1,117 @@ -import React, { useEffect, useState } from "react"; -import RewardCard from "../RewardCard"; - -enum EAvailableHost { - SHRAPNEL = "www.shrapnel.com", - CRABADA = "market.crabada.com", -} - -export enum APP_STATE { - INIT = 0, - DISMISSED = 1, - CONNECT_METAMASK = 2, - CONNECT_METAMASK_PENDING = 3, - CONNECT_METAMASK_SUCCESS = 4, - FREE_NFT_CLAIMED = 5, -} -export interface RewardItem { - host: EAvailableHost; - title: string; - description: string; - image: string; - primaryButtonText: string; - secondaryButtonText: string; - rewardName: string; -} - -export const REWARD_DATA: Array = [ - { - host: EAvailableHost.CRABADA, - title: "Claim your free NFT!", - description: - "Connect your Metamask wallet with our data wallet to gain free probs and NFT’s.", - image: chrome.runtime.getURL("assets/img/crabada-item.png"), - primaryButtonText: "Claim Reward", - secondaryButtonText: "Back to Game", - rewardName: "Crabada 761", - }, - { - host: EAvailableHost.SHRAPNEL, - title: "Claim your free NFT!", - description: - "Connect your Metamask wallet with our data wallet to gain free probs and NFT’s.", - image: chrome.runtime.getURL("assets/img/sharapnel-item.png"), - primaryButtonText: "Claim Reward", - secondaryButtonText: "Back to Game", - rewardName: "ATG-36 Helmet", - }, -]; - -// const renderCurrentState() { -// } -const App = () => { - //const [dismiss, setDissmiss] = useState(false); - const [appState, setAppState] = useState(APP_STATE.INIT); - - document.addEventListener( - "SD_WALLET_CONNECTION_COMPLETED", - async function (e) { - // @ts-ignore - const { accounts, signature } = e.detail; - console.log("accounts received: ", accounts); - chrome.storage.sync.set({ accountAddress: accounts }, function () { - console.log("Value is set to" + accounts); - }); - }, - ); +import React, { useEffect, useMemo, useState } from "react"; + +import RewardCard from "../Screens/RewardCard"; +import ConnectWallet from "../Screens/ConnectWallet"; +import ConnectWalletPending from "../Screens/ConnectWalletPending"; +import ConnectWalletSuccess from "../Screens/ConnectWalletSuccess"; +import NftClaimed from "../Screens/NftClaimed"; +import { EAPP_STATE, IRewardItem, REWARD_DATA } from "../../constants"; + +const App = () => { + const [appState, setAppState] = useState(EAPP_STATE.INIT); const [rewardToDisplay, setRewardToDisplay] = useState< - RewardItem | undefined + IRewardItem | undefined >(); - const hostname = window.location.hostname; + useEffect(() => { - let timeout: NodeJS.Timeout; - console.log("hostname: ", hostname); - const reward = REWARD_DATA.find((i) => i.host === hostname); - if (reward) { - timeout = setTimeout(() => { - setRewardToDisplay(reward); - }, 1500); - } + initiateRewardItem(); + addEventListeners(); return () => { - if (timeout) { - clearTimeout(timeout); - } + removeEventListeners(); }; }, []); - if (!rewardToDisplay) { - return null; - } - return (() => { - switch (appState) { - case APP_STATE.INIT: + + useEffect(() => { + if (appState === EAPP_STATE.CONNECT_WALLET_SUCCESS) { + setTimeout(() => { + setAppState(EAPP_STATE.FREE_NFT_CLAIMED); + }, 1000); + } + }, [appState]); + + const changeAppState = (state: EAPP_STATE) => { + setAppState(state); + }; + + const initiateRewardItem = () => { + const hostname = window.location.hostname; + const reward = REWARD_DATA.find((i) => i.host === hostname); + if (reward) { + setRewardToDisplay(reward); + } + }; + + // Event Listeners + const addEventListeners = () => { + document.addEventListener( + "SD_WALLET_CONNECTION_COMPLETED", + onWalletConnectionCompleted, + ); + + document.addEventListener( + "SD_WALLET_CONNECTION_PENDING", + onWalletConnectionPending, + ); + }; + + const removeEventListeners = () => { + document.removeEventListener( + "SD_WALLET_CONNECTION_COMPLETED", + onWalletConnectionCompleted, + ); + + document.removeEventListener( + "SD_WALLET_CONNECTION_PENDING", + onWalletConnectionPending, + ); + }; + + // Event handlers + const onWalletConnectionCompleted = (e: Event) => { + // @ts-ignore + const { accounts, signature } = e.detail; + console.log("accounts received: ", accounts); + chrome.storage.sync.set({ accountAddress: accounts }, function () { + console.log("Value is set to" + accounts); + }); + setAppState(EAPP_STATE.CONNECT_WALLET_SUCCESS); + }; + + const onWalletConnectionPending = (e: Event) => { + setAppState(EAPP_STATE.CONNECT_WALLET_PENDING); + }; + + const renderComponent = useMemo(() => { + switch (true) { + case !rewardToDisplay || appState === EAPP_STATE.DISMISSED: + return null; + case appState === EAPP_STATE.INIT: return ( - + ); - case APP_STATE.DISMISSED: - return <>; + case appState === EAPP_STATE.CONNECT_WALLET: + return ; + case appState === EAPP_STATE.CONNECT_WALLET_PENDING: + return ; + case appState === EAPP_STATE.CONNECT_WALLET_SUCCESS: + return ; + case appState === EAPP_STATE.FREE_NFT_CLAIMED: + return ( + + ); + default: + return null; } - })(); + }, [rewardToDisplay, appState]); + + return <>{renderComponent}; }; export default App; diff --git a/packages/browserExtension/src/pages/Content/components/Modal/Modal.style.ts b/packages/browserExtension/src/pages/Content/components/Modals/Modal.style.ts similarity index 93% rename from packages/browserExtension/src/pages/Content/components/Modal/Modal.style.ts rename to packages/browserExtension/src/pages/Content/components/Modals/Modal.style.ts index a8fb3c3270..baf1a83566 100644 --- a/packages/browserExtension/src/pages/Content/components/Modal/Modal.style.ts +++ b/packages/browserExtension/src/pages/Content/components/Modals/Modal.style.ts @@ -81,5 +81,13 @@ export const useGenericModalStyles = makeStyles((theme) => marginLeft: 12, width: 124, }, + successLogo: { + width: 45, + height: 45, + }, + successLogoBig: { + width: 70, + height: 70, + }, }), ); diff --git a/packages/browserExtension/src/pages/Content/components/Modals/Modal/Modal.tsx b/packages/browserExtension/src/pages/Content/components/Modals/Modal/Modal.tsx new file mode 100644 index 0000000000..339997db57 --- /dev/null +++ b/packages/browserExtension/src/pages/Content/components/Modals/Modal/Modal.tsx @@ -0,0 +1,222 @@ +import React, { FC, ReactNode } from "react"; +import { + Box, + Button, + Dialog, + DialogContent, + IconButton, +} from "@material-ui/core"; +import CloseIcon from "@material-ui/icons/Close"; + +import { useGenericModalStyles } from "../Modal.style"; + +interface IModalProps { + onPrimaryButtonClick?: () => void; + onSecondaryButtonClick?: () => void; + onCloseButtonClick: () => void; + primaryButtonText?: string; + secondaryButtonText?: string; + topContent: ReactNode; + bottomContent: ReactNode; +} + +const Modal: FC = ({ + onPrimaryButtonClick, + onSecondaryButtonClick, + onCloseButtonClick, + primaryButtonText, + secondaryButtonText = "Dismiss", + topContent, + bottomContent, +}: IModalProps) => { + const modalClasses = useGenericModalStyles(); + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {topContent && topContent} + {/* logo + + + {rewardName} + + */} + + + {bottomContent && bottomContent} + {/* + {title} + + + {description} + */} + + {onSecondaryButtonClick && ( + + )} + {onPrimaryButtonClick && ( + + )} + + + + + ); +}; + +export default Modal; diff --git a/packages/browserExtension/src/pages/Content/components/Modals/Modal/index.ts b/packages/browserExtension/src/pages/Content/components/Modals/Modal/index.ts new file mode 100644 index 0000000000..c53dcfdae6 --- /dev/null +++ b/packages/browserExtension/src/pages/Content/components/Modals/Modal/index.ts @@ -0,0 +1,2 @@ +export { default } from "./Modal"; +export { useGenericModalStyles } from "../Modal.style"; diff --git a/packages/browserExtension/src/pages/Content/components/RewardCard/RewardCard.tsx b/packages/browserExtension/src/pages/Content/components/Modals/SuccessModal/SuccessModal.tsx similarity index 91% rename from packages/browserExtension/src/pages/Content/components/RewardCard/RewardCard.tsx rename to packages/browserExtension/src/pages/Content/components/Modals/SuccessModal/SuccessModal.tsx index 3744d236aa..5bad1709f1 100644 --- a/packages/browserExtension/src/pages/Content/components/RewardCard/RewardCard.tsx +++ b/packages/browserExtension/src/pages/Content/components/Modals/SuccessModal/SuccessModal.tsx @@ -1,157 +1,41 @@ +import React, { FC, ReactNode } from "react"; import { Box, Button, Dialog, DialogContent, - DialogTitle, IconButton, - Typography, } from "@material-ui/core"; -import React, { useEffect, useState } from "react"; -import { RewardItem } from "../App/App"; -import { useGenericModalStyles } from "../Modal/Modal.style"; import CloseIcon from "@material-ui/icons/Close"; -import { APP_STATE } from "../App/App"; -import { useStyles } from "./RewardCard.style"; +import { useGenericModalStyles } from "../Modal.style"; -interface props { - rewardItem: RewardItem; - setAppState: Function; +interface IModalProps { + onPrimaryButtonClick: () => void; + onSecondaryButtonClick: () => void; + onCloseButtonClick: () => void; + primaryButtonText: string; + secondaryButtonText: string; + topContent: ReactNode; + bottomContent: ReactNode; } -const RewardCard: React.FC = (props) => { - const { rewardItem } = props; - const { setAppState } = props; - const { - title, - image, - description, - primaryButtonText, - secondaryButtonText, - rewardName, - } = rewardItem; - const classes = useStyles(); - const [open, setOpen] = useState(true); +const Modal: FC = ({ + onPrimaryButtonClick, + onSecondaryButtonClick, + onCloseButtonClick, + primaryButtonText, + secondaryButtonText = "Dismiss", + topContent, + bottomContent, +}: IModalProps) => { const modalClasses = useGenericModalStyles(); - const primaryButtonClicked = () => { - document.dispatchEvent(new CustomEvent("SD_CONNECT_TO_WALLET_REQUEST")); - }; - const secondaryButtonClicked = () => { - setOpen(false); - chrome.storage.sync.get(["accountAddress"], function (result) { - console.log("Value currently is " + result.accountAddress); - }); - // Dismiss the dialog box. - setAppState(APP_STATE.DISMISSED); - }; - - useEffect(() => { - chrome.runtime.sendMessage({ type: "SD_REQUEST_IDENTITY" }, (response) => { - console.log(response); - }); - }, []); - - const closeModal = () => { - setOpen(false); - }; - - document.addEventListener( - "SD_WALLET_CONNECTION_COMPLETED", - async function (e) { - // @ts-ignore - const { accounts, signature } = e.detail; - console.log("accounts received: ", accounts); - console.log("signature received: ", signature); - chrome.storage.sync.set({ accountAddress: accounts }, function () { - console.log("Value is set to " + accounts); - }); - }, - ); - return ( - //
- // test - //
- //
- // - //
- // {rewardName} - //
- //
- - //
- //
- //
- // {title} - //
- //
{description}
- //
- //
- //
- // {secondaryButtonText} - //
- //
- // {primaryButtonText} - //
- //
- //
- //
- //
- = (props) => { = (props) => { disableTouchRipple aria-label="close" className={modalClasses.closeButton} - onClick={closeModal} + onClick={onCloseButtonClick} > @@ -253,58 +137,35 @@ const RewardCard: React.FC = (props) => { - logo - - - {rewardName} - - + {topContent && topContent} - - {title} - - - {description} - - + {bottomContent && bottomContent} +