From 1f5fdddc4f46354360ae185e6737d9e0959272eb Mon Sep 17 00:00:00 2001 From: lianahus Date: Wed, 5 Jun 2024 18:56:02 +0200 Subject: [PATCH] UI changes in Env explorer excluded some plugins from reload --- apps/remix-ide/src/app.js | 6 +-- ...providers.tsx => environment-explorer.tsx} | 18 ++++---- .../assets/img/EnvironmentExplorerLogo.webp | Bin 0 -> 10184 bytes apps/remix-ide/src/blockchain/blockchain.tsx | 9 ++-- apps/remix-ide/src/remixAppManager.js | 14 +++++- .../src/lib/components/environment.tsx | 41 ++++++++++++++++-- 6 files changed, 66 insertions(+), 22 deletions(-) rename apps/remix-ide/src/app/providers/{grid-providers.tsx => environment-explorer.tsx} (93%) create mode 100644 apps/remix-ide/src/assets/img/EnvironmentExplorerLogo.webp diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js index 323cd25d40..a7b0b5adc4 100644 --- a/apps/remix-ide/src/app.js +++ b/apps/remix-ide/src/app.js @@ -40,7 +40,7 @@ import {HardhatProvider} from './app/providers/hardhat-provider' import {GanacheProvider} from './app/providers/ganache-provider' import {FoundryProvider} from './app/providers/foundry-provider' import {ExternalHttpProvider} from './app/providers/external-http-provider' -import { GridProviders } from './app/providers/grid-providers' +import { EnvironmentExplorer } from './app/providers/environment-explorer' import { FileDecorator } from './app/plugins/file-decorator' import { CodeFormat } from './app/plugins/code-format' import { SolidityUmlGen } from './app/plugins/solidity-umlgen' @@ -278,7 +278,7 @@ class AppComponent { const foundryProvider = new FoundryProvider(blockchain) const externalHttpProvider = new ExternalHttpProvider(blockchain) - const gridProviders = new GridProviders() + const environmentExplorer = new EnvironmentExplorer() // ----------------- convert offset to line/column service ----------- const offsetToLineColumnConverter = new OffsetToLineColumnConverter() Registry.getInstance().put({ @@ -353,7 +353,7 @@ class AppComponent { ganacheProvider, foundryProvider, externalHttpProvider, - gridProviders, + environmentExplorer, this.walkthroughService, search, solidityumlgen, diff --git a/apps/remix-ide/src/app/providers/grid-providers.tsx b/apps/remix-ide/src/app/providers/environment-explorer.tsx similarity index 93% rename from apps/remix-ide/src/app/providers/grid-providers.tsx rename to apps/remix-ide/src/app/providers/environment-explorer.tsx index a2d57c7be8..d330ca21d8 100644 --- a/apps/remix-ide/src/app/providers/grid-providers.tsx +++ b/apps/remix-ide/src/app/providers/environment-explorer.tsx @@ -11,10 +11,10 @@ import * as packageJson from '../../../../../package.json' const _paq = (window._paq = window._paq || []) const profile = { - name: 'gridProviders', - displayName: 'Grid providers', - icon: 'assets/img/deployAndRun.webp', - description: 'Pin web3 providers', + name: 'environmentExplorer', + displayName: 'Environment Explorer', + icon: 'assets/img/EnvironmentExplorerLogo.webp', + description: 'Explore providers and customize web3 provider list', location: 'mainPanel', documentation: 'https://remix-ide.readthedocs.io/en/latest/run.html', version: packageJson.version, @@ -26,7 +26,7 @@ const profile = { type ProvidersSection = `Injected` | 'Remix VMs' | 'Externals' -export class GridProviders extends ViewPlugin { +export class EnvironmentExplorer extends ViewPlugin { providers: { [key in ProvidersSection]: Provider[] } providersFlat: { [key: string]: Provider } pinnedProviders: string[] @@ -64,7 +64,7 @@ export class GridProviders extends ViewPlugin { } render() { return ( -
+
) @@ -90,17 +90,17 @@ export class GridProviders extends ViewPlugin { {this.providers['Injected'].map(provider => { return =K%gh)tb#?0rw$|#eF377zH*tRW`8g1KlTve?&G!DVtC62ojXF`k&7C|Ef zi@SSf&=6N7x#J#Ucs%G3YuurQ?yl=RepGeUd7d;`miu2sOn}Ni!i*A=Kv0lqX#TlG zt5&N~ujBrw@7|S2cCT{Mi?r@OtcFr* z(ad6i3ohQZvWRMvy3YO?e%by93DfEfyKTwSqZ^&fS`Hjqfn*DA0FWEnvm+g}sP|ou zzYP@a2;<@-jW2%kiOWwpIaTR*aV?VHKMf%39zYC;QvI2A4;l#nDlR3y>ad6I9aR3L z)9jJ~q?$V!pvEJ_p$L$EN3H7t4jxYis6P6EG4)R>?Z%!)%3E&$XmcO&8YrRwmtC9# zuxEdAK)X2;o1QdUU)_<^f0+%?YX*rT22=n}t6dx5KtU={>#Fe$PYR7Ecg5nGy8#A` zrPLq^sF(wAJTE1vcKHQW%DjqWF2v@Sj{uy1KBbEyrW7)B0169IgIZ&Uq?K(0W?*&Y zQvhRnk)lv~dQE^(EkMgFI+bCk%&m>pRgVH(+nyA~NNGs92oUDmfU}2HDr*EyaN#8E z{(2X{w1&9N1c-%J$R5_IY!Ov}>bF(F?v~jA)9d0o8UfO4Sb^64E0!Um3efEqEay%K zm{x}rMG;Mb@&S+`cF5@0wCped!L@_2d|(Q|)s3+zq#QMXu>{T9lo|1r?#K4gYXL@g zC1p`;<|&X?&JvZ|q?a8HAHsI=B!G+hVpGu6FbZTxZuc(jLK~iWTy6fwV@}hy*9rBZze~ z9pDyhi(>!a9-wL~Ylu0KZoH7+{|~^}8rA?&TkJjn)TwQaSiy;N?ScIM`endb7jR;3 zJqEO_WQ|zfiE`Fh>>ru|)Vz%ob^2q#U309lqu-_zqUp`p*BgQ8JvbF7h3CHy*&lSb z#)d)rPJqgf;_z7orr}aib-}J4+o0{rD%MzWQHghvhj6%Y3DB*-Bi!)mkYX6KD6qyo zbG*A2hv96X%5At&RGl#MeqhnR?S+@U;#r@5E|vh?jZ;-HxGfm;71UVO$QlQG{^C{b zIXL`tA#hH0HyA+N@LRV-aPAusYkW5#&!fl#I1Fb2wQj(zs0Tbg4S3;FdpvxDN8{DS z8wzqat^mb#$BF7X8^Qsw1P7{eDh=>OF&4O|tpGpv?i4;Kv zL`>wt8D0qConH_j0fCBWoT4a*F~2u zetISz7IfYWH{FN*qg}Q+N}Ghsr9jOq@i7KSh?n!Of@&L1vB%Ss9QBE~$e#yHz{^1J zHt+P`;HLW=968NR`n9-x3#dKP4+2p2gZUGo?uHunc+5?=bQgt-fQ#`|0AG%D-3Cui za@E&nuCjQ z`O7{uYm6@Rnvue9T<*3B3>Qr_%|6}o^Fp3 zl`Qqc}tr%5Fj;XA-k z{8c>9>#~Kcue#V{KxHdu;WBqGl<(z{{}boK?YB6n+sQ^S+{wy)(7B~&;??r=pzntf zdy)RLE!6AgLf;4aMLkkLz1rDnFSXa#wnyJcm|FX4E)K1M%)$7q2$YC`fA?IN`~>zZc6l|WpgS%A-%u~eE=b8&b(lt0xoLDj30)4wP9u%Cmb_5Mhuan!}G{m{6H zXNvC=7Qp>898|7HsvU6oLxE`1EWZ>~{8}(UbizFBOZ!wJ9i6O1>4euJfcmwvw_(tG zVvnw=R6NB+>{kdn`-S3tUbi1XJGwr8TCWlhcGf=W*IgH$>BRZA|tqKnueNU!A? z3W#U1sHhS1fmFvppuM$28Rt4sC<#dRuVEF!Xb=b}feF!g6jbH#LHKKEMH4~A7*#L;-xN)) zO%m=JeGJ>p=T(4R^Z$>86<)5LfG4LL#i^*P6H$>ymy__==v~-vKCc4s%EJk$^HPNb zG}~_6kZnX16cq(TK?PKaXc3T!f&zjhA#s{WHBLYw5*CAG-A>}iUIQd01x2CRe<}c5 zCLN56j+&n6rLo48CJGYK;-soRUqhmzMpaQIz^EZWRW;*}%Z^j^m1+uTs7kzmkT^~i zRgIGXqglU?#>bLL z?^p->d&(W4O1Esh&MkkKn%(ew>Amns4;*evFG%KiAr4~#VG(|Z5JUsd7`-J}(80yw zVv;Q`aFJCG3i3P)M1sEJ+xm&wFEns*B$ias0VfsUxNjmNz3_hGpD$N+v5Ta`0vDMz zp(cV2fuVk#4?io4`@H*q863P7Tkl!=Esmiqp-hu+9a2fVG~fZ%1}Oxeji=Nok9d z4q34ExK|R0XIu9|%^W9%J5$=6=b~X9_}>oC$n|TjftFcL_J%3_vE4;>3pldYD>ZV| ztJqHv^b#jONlFE4Tm*xGkGuli;nmJkEAnA=j%lN1;g-CnY~v zSaaM(lLoNqN1qhg?34K#=o&cLn`dF`Ru|>^K=Hdi8KbLx+VK-)pN-S?Vj=%y7YrBp zxWpqh`gguZYmY*c25#QP=BMi7)VlD~FCKw0pZgPj0i2oc(shVuPz`dhk{o$tBeLg4=j{0Y>AKdU!i9)q?G-Mon1WyVFHMzCq6KO!*`miSWe z0my*B$-z~YR{iaw@=yq0@JB<9#bUl}*akUg;q>dk(t(#;Fe(Zk{^<>&iN%a3<~;*v zD%0i&HzoffxKC3}bkjy9&}r;Pj6_to`zdi;S_rD+T_TFs7coa}+wZck>$7 z%{+C$g$-ciQeV_)SmMdS_dw2xI63^bJ-+pyn%zo%VrQ#P!5%?mZ4 zczF0F;DQ=X^wHyvsJ_0w18#f>+OEm+AR0gr@!-`ib!gKCr|Wj&e(94LDvF?JoG1t& zXxd+0j=+ptB8VCVMN&`@L^aqG!m<4|Vj?O+kS@uo2^BDsn?I*T7u*&;h=;ARO%x48 zF>#}R3aS9c$kC(7-~B3u(P(;BW>z$Fc;BQXhzJl+?|PhP z%~|xjU)i}8f=F711VQopnOD|I!tV}`j>R9L046LhGA5AVqmKp;cD8iewdF0)aPbiQ zva*U*;xrjmM9`ox1j@6N<>b7k<2~zmt!iKfCD%Giq9( z;iW0Ko&NmMNJJD=0gY2dB7uZyKaDAZOKv|Vs+vdvMNvQ{2+)j8ql>BbM$KXcEh;W4 zD2~O#U7NS(WJfKT1BZKER-6BA$xgGtg)1}g%3L}Ghu1#>)mFB~ZEp5qa?Z>oUhpue zRykd;UU%-<3Y=*1O*IDx&)5n*KT3BKQwU->-(9XkBIgIsw&292OCt7IalV23XSfjo z#L3}FxiDf5zHU6*ffG+(<3J}YgbJT^bwU8DE_B}6^~fHBziZFVz^T$_o$YbptS!*> z^YSiK04EfF~x~5*!vy2eR(Q z0E$Wxcq2Yg@_Q@^T5<*ad~9| z13&~3&}?}dYi#bl3+jK|!k$`MbOh0ntz5kGQY2kNA+q;@i@F1MK_mbGiL?2#Hr9CS zqGCAh{i@b1uX!D`*;E|9xm?5;V<0Gep!0=1(H;RHA}=DL$*Wzh@!$;L+*dMeiIv>B zK&AU}`0D!rp~e(~;OR=+@BLBRP;Hf)qwPdq!3cytC>%DtOs7g#jMG#dH2%;i-=S^aX-GhFF+n<ahWq`0TtRvQD^>uRk6?S*<5*VZgswbeYPJn7eR^WZ?h9Y(nM}ND zGAot=k^8Z{_x631)o0(`(*|SjngzSgTRbuu1(hV;S_a5%*e!W|K4o~u_!;#rF!N4< zgO@H##(-*RE0zIr8+L!Xl`_8W)CrYRWA0;Vkazi_BotIiS+*SD7OejH)H=%kHrHQJ zAtk2#Hy!e?dMv5Z-+Tv1&org zXzFbtWIs%*hrfA#2Pfb3Q%4PL7$m`&?=%D68T4}^5e|-d3Mls|$rt~;bfs{TuG00~ z0j4zCzIz(*{h+sq20-@qVXp!?kCN=Mtsj0;!b!dIfCs-htO;oL-bi5Qh4|`^w+q2&U&Bz7jmEBdh`AR^|QsE0AA4WMcA)p zy#hO<=O^wT>OBDa3G4y<95Nk@mIBfubTc2e z8F}QVBuGb{ngh!>MW*efXkxYXC4wSZA=%3sYGGgkA5Keu5e(dHuT8tenf}r%_7lA~ z+MU3wKhpwIAiNalmMO7hh% zZdW*5TMzt|Qyd8;ZH`MSiCam2-DVo`@PXLqh_HPO4SiszjX(MhY)!xS$9j+8{Y5|>YOoGEmrZHQo6bSxQ>UV^m zzoT`SW-RMGZ&zJlGo75&+J#cO`zWJ$+d!_yorK>6V(78X`6->@5+~kua-` zAt8=J)H&%+uXEf1S;ng-t>0j3FNf}XawNIl36X5T$IDF%gZt@jtI|)K>-NV^_It6& zDgsjqPo=R0l%bFlP9+xukofa^vNwU{rz)A7bVnzOzm?}XmW}CA1^bU~wGHEy-b~n` zoB`ErbXtjya6nnw{s01nc}6g03=x%!tYik=$32PzUSOnVA^8h%yugxJ=Vv4B=C2E2 z8tYCcp9cachiirkdLDS~cPXNGwge;n%jO!z@Roj3J=Of zTwE(I>f^~8Nnz^y5=AWwmVFIc%ORU*#LFLDCkfiN_Ng(Ax`Fctzx*7JP8iNPIYmNM ztV!z1t0W=$jsyA~ftk0MC=0YUkgao!0R6i>!4g6U4v)YgmwPGd^mIoCA{cBW|H-c^ zMifr!ng>`JcVS>;+fiaWa9rO$*u6pLps9YHUejjnonO4mN+KCLX2R8El-OlLg@$6t z_+~5V=|^Sc?Ip$_!ewigFTQpNG^b{w;^OtFgql_ zOA-9C`dN6%Y-TzId8eyA?+w&xDUs5OxWiOu`+51u!DrSf1Z5QSf?#f)aB0V`GwIp z;)u!nd(tt`;6DF|%cQW}#rhm00F=iyyZ@%Mx67YKM&oWZpB3*Y13~Lbp_%4g!M`3* ziTn(+w?-onB16mxElI1LJ-f~ON0m6d>^cF2wzoy75bEHmVC?g$V3*$KHoJa0<%J4G zMRI$0=m3hL7ot(G2S)8R6>F5XhBUd0rAw6P{{IHug^djOL^-5Ioa_mfqAe9S!}WCH#0$3PjP#+1O$?|KE?!HrrNl69HbA7}mLb=DYNr zsbq;JxLlTa%O1qJ(u;LIwwDv?nmlGMG+O3#59&<=qxPX0;k^?D4w`&ab&MSFgm5K$ z#ceAxdOTT1Lb8pfw)kewenZV9sx&+az#Y`f0wW@4i`HnI#k^f=@47SiQm+@*m&7En6#X& zTnPH7nT$!sOcZLt@CmD8-*5n~H(<*@U>F84ewV&}<;SGXp%wb9?z9Aa)PeCBQ?wCJ zUN)RlJ8&Uxh`c%=qSz6SU<|aGZ@G9P7Qq5$3JEFzS?nP9kupx`t?Ho`fwvLT20lP( z#3k4>IHLE&<&fzpNKODAdG^F(lVBGwAg_MdL2*|mkV-e4hdTpxxC(zM%!OEGa z&KKBv8GXVt?9wb#x)2u192(ztxWS-h5P~W=4@mCTQxriz2?Eo*0EKtnN;FE+Y$$Xg zUXtY%5q62)FA=K7)#%QpU6w*D9$Z}L0SAUhI`!<$=M9D7eCt2w|67YrTj*U~JgK&^ za$Kc-TxR!_x98gLa7pt%UDb+-N{untiqJkY}| zVavkc`FCP>hBxMIKeQdy(@<^ICy=j21An$*3>+HxDxxlkW27-`$=e&IUgI!|T=KUd za-L@$c_XT&*=erjPB{D4@;O;yi+tT|a|v6XFEr*bf~8`jj1l_(lkmb3I9WfAeCe5M zewtX)z#i0hX53ZU*~Q@^BC@FOw<&=3P$SO3q1vRnu~)=q;W})I@+~|&_6=oAJVNzU z8tQezCEMXPode7r{HW9*khTycJQ_nSweCx45_I{`p+?+uB(Cn&kPp(S7RmpnT5W_94aiQ!sYOYf`r10kVO+ZX?*>tB*MosdtqoO%6--YQPbNTYahe z-UULjZ_IhHU;9kw1B?KE*#U^b=!Z|>v$1TWANW2UOaY7#EJ1e)D`BR#yXK0#)5jF2 z3%W~M2W@5xaWy?(KY}i`G{e1uLW4RpNchtK8d{{^JBiiNCHxDy*Ta6reYpZT&x=Bd zh`vDv8xm&aikhIn&k~A0Kn0=q?>M*Lmq(4a+ljAE&O&Zv`aA9Cqjv~A`f!pI;4$~ zA_ULuzfyHCM`{t)scvTG4&m0Uj+6I9jA{W<5M zvhk2Tn#mgC&VqnUe|Cs+P>KE;`kOD}-%|9+(og5PaE;<~<SgIz&z+~XEdGhsUDeUlj*521pG{^!- zd;XoEzfq_-Bw2)n@qgT$btP$Y4nwf4&5mKMpr{N`q4aNvClLCWAPKGSzPtl=%Fz>j zgfUdpxBe)0rpU553t@dGTXiBdf-#|GpN=rmhXrS%fSgqDbT!p>O7%h}a^b;R4WNN6 zpisXC?|;&_k-UkvI>O8GMNqAVWMspeb&yw|%sdI7h70&ERUFElaHJY$$a-yUj|~2n zyK_nP>e+`x_(HsigcY+&3v8HfBn-PE@RlM>4ne^&=ZuJwV&{Vjb|EH!gDG?{?Vu*b`%N8V8dI4UIz^A(>Z4?8)SorBQ#TL z{e%*?5~Or41hMss+F>PH0;vH`)^2dlx9UX;DTlD!+r*l@=_&+}TWF)+j-&xJ;WAZb zxDVrf1qmQfsTJrN2fk4Vgu}_bY^D6uDHlVh=#aG7rWm+XAI~3?p?CA+{H2g3%z#Nr z%@?c3K?MsQ2P0ZW+fydrl6gmmT$o(;liX*NB(eDSxaxdVrdk=~ywkKDb{fRM7*$qk zH130BA}*(Ca$vE>1DmhSLUF1Fw;^k#P|k5Ulu6HoJjTwLQAGE!3G0-_H<1vddRnEp zmlkV@86ChZ7VQ>L#?>O3bksX7FH8P|j`#X8u^tEzc~QuH@M72H6fyUw&8{Yy3TB{p zQ+4J&`2yTQf-FKT#ni3e)Z|(x8!mSV3eRMNVhWR@^n>2IH!jj-(>Had~rokn!mG z#nXd7WXDj=K{rp|;$_xd00qLGQLo}5I_#;}J$>lEO16*`yWB#5w z4m)$`at$OQy+bc!*O&KwoifsyOcYK=CNOZj4&V~_j)QE7vhDrYnMoa}<7BczBtKv* z>+#lxWk$`3o<+}j8ig-J_NiW>I0a_(Ps!5r`qM$a$wmDqEd-~$=MEtOhVxSZ-VB*m zr-1WqW$stXOg))qu#Z3G_Q{cB>VWVlIbC&P$5Z8xw`RM8gMVS!oIpuEyjCj-+7Eov z&A9= { + this.on('environmentExplorer', 'providerPinned', (name, provider) => { this.emit('shouldAddProvidertoUdapp', name, provider) }) - this.on('gridProviders', 'providerUnpinned', (name, provider) => { + this.on('environmentExplorer', 'providerUnpinned', (name, provider) => { this.emit('shouldRemoveProviderFromUdapp', name, provider) }) } @@ -531,7 +530,7 @@ export class Blockchain extends Plugin { changeExecutionContext(context, confirmCb, infoCb, cb) { if (context.context === 'item-another-chain') { - this.call('manager', 'activatePlugin', 'gridProviders').then(() => this.call('tabs', 'focus', 'gridProviders')) + this.call('manager', 'activatePlugin', 'environmentExplorer').then(() => this.call('tabs', 'focus', 'environmentExplorer')) } else { return this.executionContext.executionContextChange(context, null, confirmCb, infoCb, cb) } diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js index 20b69d984f..bdfd9ecf06 100644 --- a/apps/remix-ide/src/remixAppManager.js +++ b/apps/remix-ide/src/remixAppManager.js @@ -82,7 +82,8 @@ let requiredModules = [ // services + layout views + system views 'pinnedPanel', 'pluginStateLogger', 'remixGuide', - 'matomo' + 'matomo', + 'walletconnect' ] @@ -389,7 +390,16 @@ class PluginLoader { constructor() { const queryParams = new QueryParams() - this.donotAutoReload = ['remixd'] // that would be a bad practice to force loading some plugins at page load. + // some plugins should not be activated at page load. + this.donotAutoReload = [ + 'remixd', + 'environmentExplorer', + 'templateSelection', + 'compilationDetails', + 'walletconnect', + 'dapp-draft', + 'solidityumlgen' + ] this.loaders = {} this.loaders.localStorage = { set: (plugin, actives) => { diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx index f62c797577..6eecbba5a5 100644 --- a/libs/remix-ui/run-tab/src/lib/components/environment.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/environment.tsx @@ -6,6 +6,11 @@ import { Dropdown } from 'react-bootstrap' import { CustomMenu, CustomToggle, CustomTooltip } from '@remix-ui/helper' export function EnvironmentUI(props: EnvironmentProps) { + + Object.entries(props.providers.providerList.filter((provider) => { return provider.isVM })) + Object.entries(props.providers.providerList.filter((provider) => { return provider.isInjected })) + Object.entries(props.providers.providerList.filter((provider) => { return !(provider.isVM || provider.isInjected) })) + const handleChangeExEnv = (env: string) => { const provider = props.providers.providerList.find((exEnv) => exEnv.name === env) const context = provider.name @@ -23,7 +28,6 @@ export function EnvironmentUI(props: EnvironmentProps) {