add logo and fix filtering

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

@@ -106,7 +106,9 @@ export class EnvironmentExplorer extends ViewPlugin {
             return <RemixUIGridCell
               plugin={this}
               title={provider.displayName}
+              logo={provider.logo}
               classList='EECellStyle'
+              payload={provider.description}
               pinned={this.pinnedProviders.includes(provider.name)}
               pinStateCallback={async (pinned: boolean) => {
                 if (pinned) {
@@ -135,7 +137,9 @@ export class EnvironmentExplorer extends ViewPlugin {
             return <RemixUIGridCell
               plugin={this}
               title={provider.displayName}
+              logo={provider.logo}
               classList='EECellStyle'
+              payload={provider.description}
               pinned={this.pinnedProviders.includes(provider.name)}
               pinStateCallback={async (pinned: boolean) => {
                 if (pinned) {
@@ -163,6 +167,8 @@ export class EnvironmentExplorer extends ViewPlugin {
             return <RemixUIGridCell
               plugin={this}
               title={provider.displayName}
+              logo={provider.logo}
+              payload={provider.description}
               classList='EECellStyle'
               pinned={this.pinnedProviders.includes(provider.name)}
               pinStateCallback={async (pinned: boolean) => {

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

@@ -151,6 +151,14 @@ export class RunTab extends ViewPlugin {
       'injected-metamask-ephemery': 'Deploy to the Ephemery Testnet network through the Metamask browser extension.'
     }
 
+    const logos = {
+      'injected-metamask-optimism': 'assets/img/optimism-ethereum-op-logo.png',
+      'injected-metamask-arbitrum': 'assets/img/arbitrum-arb-logo.png',
+      'injected-MetaMask': 'assets/img/metamask.png',
+      'hardhat-provider': 'assets/img/hardhat.png',
+      'walletconnect': 'assets/img/Walletconnect-logo.png'
+    }
+
     const addProvider = async (position, name, displayName, isInjected, isVM, fork = '', dataId = '', title = '') => {
       await this.call('blockchain', 'addProvider', {
         position,
@@ -159,6 +167,7 @@ export class RunTab extends ViewPlugin {
         name,
         displayName,
         description: descriptions[name] || displayName,
+        logo: logos[name],
         fork,
         isInjected,
         isVM,

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

@@ -49,6 +49,7 @@ export type Provider = {
   dataId: string
   name: string
   displayName: string
+  logo?: string,
   fork: string
   description?: string
   isInjected: boolean

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

@@ -17,6 +17,7 @@ interface RemixUIGridCellProps {
   pinStateCallback?: any
   logo?: string
   title: string
+  payload?: string
   tagList?: string[] // max 8, others will be ignored
   classList?: string
   styleList?: any
@@ -35,8 +36,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) => {