Templates 2

apps/remix-ide-e2e/src/tests/plugin_api.ts

@@ -184,7 +184,7 @@ module.exports = {
       .frameParent()
       .useCss()
       .clickLaunchIcon('udapp')
-      .waitForElementContainsText('#selectExEnvOptions button', 'Remix VM (Berlin)')
+      .waitForElementContainsText('#selectExEnvOptions button', 'VM Berlin Fork')
       .clickLaunchIcon('localPlugin')
       .useXpath()
       // @ts-ignore

apps/remix-ide/src/app/providers/environment-explorer.tsx

@@ -95,92 +95,104 @@ export class EnvironmentExplorer extends ViewPlugin {
         showUntagged={true}
         showPin={true}
         title={profile.description}
-        description="Pin the providers and chains to include them in the ENVIRONMENT select box of the Deploy & Run Transactions module."
+        description="Select the providers and chains to include them in the ENVIRONMENT select box of the Deploy & Run Transactions plugin."
       >
         <RemixUIGridSection
           plugin={this}
-          title='Injected'
-          hScrollable={true}
+          title='Deploy using a Browser Extension.'
+          hScrollable={false}
         >
           {this.providers['Injected'].map(provider => {
             return <RemixUIGridCell
               plugin={this}
-              title={provider.name}
+              title={provider.displayName}
+              logos={provider.logos}
               classList='EECellStyle'
+              payload={provider.description}
               pinned={this.pinnedProviders.includes(provider.name)}
               pinStateCallback={async (pinned: boolean) => {
                 if (pinned) {
                   this.emit('providerPinned', provider.name, provider)
+                  this.call('notification', 'toast', `"${provider.displayName}" has been added to the Environment list of the Deploy & Run Transactions plugin.`)
                   return true
                 }
                 const providerName = await this.call('blockchain', 'getProvider')
                 if (providerName !== provider.name) {
                   this.emit('providerUnpinned', provider.name, provider)
+                  this.call('notification', 'toast', `"${provider.displayName}" has been removed from the Environment list of the Deploy & Run Transactions plugin.`)
                   return true
                 } else {
                   this.call('notification', 'toast', 'Cannot unpin the current selected provider')
                   return false
                 }
               }}
             >
-              <div>{provider.name}</div>
+              <div>{provider.description}</div>
             </RemixUIGridCell>
           })}
         </RemixUIGridSection>
         <RemixUIGridSection
           plugin={this}
-          title='Remix VMs'
-          hScrollable= {true}
+          title='Deploy to an In-browser Virtual Machine.'
+          hScrollable={false}
         >{this.providers['Remix VMs'].map(provider => {
             return <RemixUIGridCell
               plugin={this}
-              title={provider.name}
+              title={provider.displayName}
+              logos={provider.logos}
               classList='EECellStyle'
+              payload={provider.description}
               pinned={this.pinnedProviders.includes(provider.name)}
               pinStateCallback={async (pinned: boolean) => {
                 if (pinned) {
                   this.emit('providerPinned', provider.name, provider)
+                  this.call('notification', 'toast', `"${provider.displayName}" has been added to the Environment list of the Deploy & Run Transactions plugin.`)
                   return true
                 }
                 const providerName = await this.call('blockchain', 'getProvider')
                 if (providerName !== provider.name) {
                   this.emit('providerUnpinned', provider.name, provider)
+                  this.call('notification', 'toast', `"${provider.displayName}" has been removed from the Environment list of the Deploy & Run Transactions plugin.`)
                   return true
                 } else {
                   this.call('notification', 'toast', 'Cannot unpin the current selected provider')
                   return false
                 }
               }}
             >
-              <div>{provider.name}</div>
+              <div>{provider.description}</div>
             </RemixUIGridCell>
           })}</RemixUIGridSection>
         <RemixUIGridSection
           plugin={this}
-          title='Externals'
-          hScrollable= {true}
+          title='Deploy to an external Provider.'
+          hScrollable={false}
         >{this.providers['Externals'].map(provider => {
             return <RemixUIGridCell
               plugin={this}
-              title={provider.name}
+              title={provider.displayName}
+              logos={provider.logos}
+              payload={provider.description}
               classList='EECellStyle'
               pinned={this.pinnedProviders.includes(provider.name)}
               pinStateCallback={async (pinned: boolean) => {
                 if (pinned) {
                   this.emit('providerPinned', provider.name, provider)
+                  this.call('notification', 'toast', `"${provider.displayName}" has been added to the Environment list of the Deploy & Run Transactions plugin.`)
                   return true
                 }
                 const providerName = await this.call('blockchain', 'getProvider')
                 if (providerName !== provider.name) {
                   this.emit('providerUnpinned', provider.name, provider)
+                  this.call('notification', 'toast', `"${provider.displayName}" has been removed from the Environment list of the Deploy & Run Transactions plugin.`)
                   return true
                 } else {
                   this.call('notification', 'toast', 'Cannot unpin the current selected provider')
                   return false
                 }
               }}
             >
-              <div>{provider.name}</div>
+              <div>{provider.description}</div>
             </RemixUIGridCell>
           })}</RemixUIGridSection>
       </RemixUIGridView>

apps/remix-ide/src/app/providers/style/environment-explorer.css

@@ -2,5 +2,4 @@
   min-height: 4rem;
   max-width: 10rem;
   min-width: 9rem;
-  max-height: 5rem;
 }

apps/remix-ide/src/app/udapp/run-tab.js

@@ -129,13 +129,51 @@ export class RunTab extends ViewPlugin {
   async onInitDone() {
     const udapp = this // eslint-disable-line
 
+    const descriptions = {
+      'vm-cancun': 'Deploy to the in-browser virtual machine running the Cancun fork.',
+      'vm-shanghai': 'Deploy to the in-browser virtual machine running the Shanghai fork.',
+      'vm-paris': 'Deploy to the in-browser virtual machine running the Paris fork.',
+      'vm-london': 'Deploy to the in-browser virtual machine running the London fork.',
+      'vm-berlin': 'Deploy to the in-browser virtual machine running the Berlin fork.',
+      'vm-mainnet-fork': 'Deploy to a fork of the Ethereum mainnet in the in-browser virtual machine.',
+      'vm-sepolia-fork': 'Deploy to a fork of the Sepolia testnet in the in-browser virtual machine.',
+      'vm-custom-fork': 'Deploy to a fork of a custom network in the in-browser virtual machine.',
+      'walletconnect': 'Deploy using WalletConnect.',
+      'basic-http-provider': 'Deploy to a Custom local network.',
+      'hardhat-provider': 'Deploy to the local Hardhat dev chain.',
+      'ganache-provider': 'Deploy to the local Ganache dev chain.',
+      'foundry-provider': 'Deploy to the local Foundry dev chain.',
+      'injected-MetaMask': 'Deploy through the Metamask browser extension.',
+      'injected-Brave Wallet': 'Deploy through the Brave Wallet extension.',
+      'injected-Brave': 'Deploy through the Brave browser extension.',
+      'injected-metamask-optimism': 'Deploy to Optimism through the Metamask browser extension.',
+      'injected-metamask-arbitrum': 'Deploy to Arbitrum through the Metamask browser extension.',
+      'injected-metamask-sepolia': 'Deploy to the Sepolia testnet through the Metamask browser extension.',
+      'injected-metamask-ephemery': 'Deploy to the Ephemery testnet through the Metamask browser extension.'
+    }
+
+    const logos = {
+      'injected-metamask-optimism': ['assets/img/optimism-ethereum-op-logo.png', 'assets/img/metamask.png'],
+      'injected-metamask-arbitrum': ['assets/img/arbitrum-arb-logo.png', 'assets/img/metamask.png'],
+      'injected-metamask-sepolia': ['assets/img/metamask.png'],
+      'injected-metamask-ephemery': ['assets/img/metamask.png'],
+      'injected-MetaMask': ['assets/img/metamask.png'],
+      'injected-Brave Wallet': ['assets/img/brave.png'],
+      'injected-Trust Wallet': ['assets/img/trust-wallet.png'],
+      'hardhat-provider': ['assets/img/hardhat.png'],
+      'walletconnect': ['assets/img/Walletconnect-logo.png'],     
+      'foundry-provider': ['assets/img/foundry.png']
+    }
+
     const addProvider = async (position, name, displayName, isInjected, isVM, fork = '', dataId = '', title = '') => {
       await this.call('blockchain', 'addProvider', {
         position,
         options: {},
         dataId,
         name,
         displayName,
+        description: descriptions[name] || displayName,
+        logos: logos[name],
         fork,
         isInjected,
         isVM,
@@ -167,15 +205,15 @@ export class RunTab extends ViewPlugin {
       await addProvider(0, name, displayName, true, false, false)
 
       if (event.detail.info.name === 'MetaMask') {
-        await addCustomInjectedProvider(7, event, 'injected-metamask-optimism', 'L2 - Optimism', '0xa', ['https://mainnet.optimism.io'])
-        await addCustomInjectedProvider(8, event, 'injected-metamask-arbitrum', 'L2 - Arbitrum', '0xa4b1', ['https://arb1.arbitrum.io/rpc'])    
-        await addCustomInjectedProvider(5, event, 'injected-metamask-sepolia', 'Testnet - Sepolia', '0xaa36a7', [],
+        await addCustomInjectedProvider(7, event, 'injected-metamask-optimism', 'L2 - Optimism - ' + event.detail.info.name, '0xa', ['https://mainnet.optimism.io'])
+        await addCustomInjectedProvider(8, event, 'injected-metamask-arbitrum', 'L2 - Arbitrum - ' + event.detail.info.name, '0xa4b1', ['https://arb1.arbitrum.io/rpc'])    
+        await addCustomInjectedProvider(5, event, 'injected-metamask-sepolia', 'Sepolia Testnet - ' + event.detail.info.name, '0xaa36a7', [],
           {
             "name": "Sepolia ETH",
             "symbol": "ETH",
             "decimals": 18
           })    
-        await addCustomInjectedProvider(9, event, 'injected-metamask-ephemery', 'Ephemery Testnet', '', ['https://otter.bordel.wtf/erigon', 'https://eth.ephemeral.zeus.fyi'],
+        await addCustomInjectedProvider(9, event, 'injected-metamask-ephemery', 'Ephemery Testnet - ' + event.detail.info.name, '', ['https://otter.bordel.wtf/erigon', 'https://eth.ephemeral.zeus.fyi'],
           {
             "name": "Ephemery ETH",
             "symbol": "ETH",
@@ -192,16 +230,16 @@ export class RunTab extends ViewPlugin {
       }      
     }
 
-    // VM
+    // VM    
     const titleVM = 'Execution environment is local to Remix.  Data is only saved to browser memory and will vanish upon reload.'
-    await addProvider(1, 'vm-cancun', 'Remix VM (Cancun)', false, true, 'cancun', 'settingsVMCancunMode', titleVM)
-    await addProvider(50, 'vm-shanghai', 'Remix VM (Shanghai)', false, true, 'shanghai', 'settingsVMShanghaiMode', titleVM)
-    await addProvider(51, 'vm-paris', 'Remix VM (Paris)', false, true, 'paris', 'settingsVMParisMode', titleVM)
-    await addProvider(52, 'vm-london', 'Remix VM (London)', false, true, 'london', 'settingsVMLondonMode', titleVM)
-    await addProvider(53, 'vm-berlin', 'Remix VM (Berlin)', false, true, 'berlin', 'settingsVMBerlinMode', titleVM)
-    await addProvider(2, 'vm-mainnet-fork', 'Remix VM - Mainnet fork', false, true, 'cancun', 'settingsVMMainnetMode', titleVM)
-    await addProvider(3, 'vm-sepolia-fork', 'Remix VM - Sepolia fork', false, true, 'cancun', 'settingsVMSepoliaMode', titleVM)
-    await addProvider(4, 'vm-custom-fork', 'Remix VM - Custom fork', false, true, '', 'settingsVMCustomMode', titleVM)
+    await addProvider(1, 'vm-cancun', 'VM Cancun Fork', false, true, 'cancun', 'settingsVMCancunMode', titleVM)
+    await addProvider(50, 'vm-shanghai', 'VM Shanghai Fork', false, true, 'shanghai', 'settingsVMShanghaiMode', titleVM)
+    await addProvider(51, 'vm-paris', 'VM Paris Fork', false, true, 'paris', 'settingsVMParisMode', titleVM)
+    await addProvider(52, 'vm-london', 'VM London Fork', false, true, 'london', 'settingsVMLondonMode', titleVM)
+    await addProvider(53, 'vm-berlin', 'VM Berlin Fork', false, true, 'berlin', 'settingsVMBerlinMode', titleVM)
+    await addProvider(2, 'vm-mainnet-fork', 'VM Mainnet fork', false, true, 'cancun', 'settingsVMMainnetMode', titleVM)
+    await addProvider(3, 'vm-sepolia-fork', 'VM Sepolia Testnet fork', false, true, 'cancun', 'settingsVMSepoliaMode', titleVM)
+    await addProvider(4, 'vm-custom-fork', 'VM Custom fork', false, true, '', 'settingsVMCustomMode', titleVM)
 
     // wallet connect
     await addProvider(6, 'walletconnect', 'WalletConnect', false, false)

apps/remix-ide/src/blockchain/blockchain.tsx

@@ -49,7 +49,10 @@ export type Provider = {
   dataId: string
   name: string
   displayName: string
+  logo?: string,
+  logos?: string[],
   fork: string
+  description?: string
   isInjected: boolean
   isVM: boolean
   title: string

libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.css

@@ -28,7 +28,7 @@
   width: 1rem;
   height: 1rem;
   position: relative;
-  right: 1rem;
+  right: 1.4rem;
   top: -0.8rem;
   background: transparent;
 }

libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx

@@ -16,7 +16,9 @@ interface RemixUIGridCellProps {
   pinned?: boolean
   pinStateCallback?: any
   logo?: string
+  logos?: string[]
   title: string
+  payload?: string
   tagList?: string[] // max 8, others will be ignored
   classList?: string
   styleList?: any
@@ -35,8 +37,13 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
     if (props.tagList) setAnyEnabled(props.tagList.some((key) => filterCon.keyValueMap[key]?.enabled))
     else setAnyEnabled(filterCon?.keyValueMap['no tag']?.enabled)
     if (!props.tagList || props.tagList.length == 0) setAnyEnabled(true)
-    if (filterCon.filter != '') setAnyEnabled(anyEnabled && props.title.toLowerCase().includes(filterCon.filter))
-
+    setAnyEnabled(anyEnabled &&
+    (
+      props.title.toLowerCase().includes(filterCon.filter) ||
+      props.title.includes(filterCon.filter)) ||
+      props?.payload?.toLowerCase().includes(filterCon.filter) ||
+      props?.payload?.includes(filterCon.filter)
+    )
   }, [filterCon, props.tagList])
 
   /*const listenOnExpand = (key) => {
@@ -65,9 +72,10 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
             <div className="d-flex remixui_grid_cell flex-column">
               <div className='d-flex flex-row pb-1 align-items-end' style={{ width: '8rem', height: '1rem' }}>
                 { props.logo && <img className='remixui_grid_view_logo mr-1' src={props.logo} style={{ width: '1rem', height: '1rem' }}/> }
+                { props.logos && props.logos.map((logo) => <img className='remixui_grid_view_logo mr-1' src={logo} style={{ width: '1rem', height: '1rem' }}/>)}
                 { props.title && <label
-                  className='m-0 p-0 align-items-left'
-                  style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 'xx-small' }}
+                  className='m-0 p-0 align-items-left font-weight-bold'
+                  style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
                 >
                   { props.title }
                 </label> }
@@ -76,8 +84,8 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
             </div>
           </div>
           { filterCon.showPin && <button
-            className={`${pinned ? 'fa-duotone' : 'fa-light'}` + ` fa-map-pin text-info border-0 mb-0 remixui_grid_cell_pin`}
-            style={{ fontSize: 'large' }}
+            className={`${pinned ? 'fa-duotone' : 'fa-light'}` + ` fa-circle-o text-info border-0 mb-0 remixui_grid_cell_pin`}
+            style={{ fontSize: '30px' }}
             data-id={`${pinned ? `${props.title}-pinned` : `${props.title}-unpinned`}`}
             onClick={async () => {
               if (!props.pinStateCallback) setPinned(!pinned)