persist providers

apps/remix-ide-e2e/src/commands/pinGrid.ts

@@ -3,11 +3,20 @@ import EventEmitter from 'events'
 
 class pinGrid extends EventEmitter {
   command (this: NightwatchBrowser, provider: string, status: boolean): NightwatchBrowser {
-    this.api.useCss().waitForElementVisible('[data-id="settingsSelectEnvOptions"]')
-    .click('[data-id="settingsSelectEnvOptions"] button')
-    .waitForElementVisible(`[data-id="dropdown-item-another-chain"]`)
-    .click(`[data-id="dropdown-item-another-chain"]`)
-    .waitForElementVisible(`[data-id="${provider}-${status ? 'unpinned' : 'pinned'}"]`)
+    this.api.useCss()
+    .perform((done) => {
+      // check if the providers plugin is loaded.
+      this.api.isVisible({ selector: '[data-id="remixUIGSDeploy using a Browser Extension."]', suppressNotFoundErrors: true}, (result) => {
+        if (!result.value) {
+          this.api.waitForElementVisible('[data-id="settingsSelectEnvOptions"]')
+            .click('[data-id="settingsSelectEnvOptions"] button')
+            .waitForElementVisible(`[data-id="dropdown-item-another-chain"]`)
+            .click(`[data-id="dropdown-item-another-chain"]`)
+            .perform(() => done())
+        } else done()
+      })
+    })    
+    .waitForElementVisible(`[data-id="${provider}-${status ? 'unpinned' : 'pinned'}"]`, 60000)
     .click(`[data-id="${provider}-${status ? 'unpinned' : 'pinned'}"]`)
     .perform((done) => {
       done()

apps/remix-ide-e2e/src/commands/switchEnvironment.ts

@@ -4,13 +4,35 @@ import EventEmitter from 'events'
 class switchEnvironment extends EventEmitter {
   command (this: NightwatchBrowser, provider: string): NightwatchBrowser {
     this.api.useCss().waitForElementVisible('[data-id="settingsSelectEnvOptions"]')
-    .click('[data-id="settingsSelectEnvOptions"] button')
-    .waitForElementVisible(`[data-id="dropdown-item-${provider}"]`)
-    .click(`[data-id="dropdown-item-${provider}"]`)
     .perform((done) => {
-      done()
-      this.emit('complete')
-    })
+      this.api.isPresent({ selector: `[data-id="selected-provider-${provider}"]`, suppressNotFoundErrors: true, timeout: 5000}, (result) => {
+        if (result.value) {
+          done()
+        } else {
+          browser.perform(() => {
+            this.api
+              .click('[data-id="settingsSelectEnvOptions"] button') // open dropdown
+              .isPresent({ selector: `[data-id="dropdown-item-${provider}"]`, suppressNotFoundErrors: true, timeout: 5000}, (result) => {
+                console.log(result)
+                this.api.click('[data-id="settingsSelectEnvOptions"] button') // close dropdown
+                if (!result.value) {
+                  this.api.pinGrid(provider, true)
+                    .click('[data-id="settingsSelectEnvOptions"] button')
+                    .waitForElementVisible(`[data-id="dropdown-item-${provider}"]`)
+                    .click(`[data-id="dropdown-item-${provider}"]`)
+                    .perform(() => done())
+                } else {
+                  browser.click('[data-id="settingsSelectEnvOptions"] button')
+                    .waitForElementVisible(`[data-id="dropdown-item-${provider}"]`)
+                    .click(`[data-id="dropdown-item-${provider}"]`)
+                    .perform(() => done())
+                }
+              })
+            })     
+        }
+      })
+    }).perform(() => this.emit('complete'))      
+    
     return this
   }
 }

apps/remix-ide-e2e/src/tests/grid.test.ts

@@ -32,5 +32,25 @@ module.exports = {
             .click('[data-id="settingsSelectEnvOptions"] button')
             .waitForElementNotPresent(`[data-id="dropdown-item-vm-sepolia-fork"]`)
             .click('[data-id="settingsSelectEnvOptions"] button') // close the dropdown
+    },
+    'remember pin upon reload': function (browser: NightwatchBrowser) {
+        browser
+            .pinGrid('vm-paris', true)
+            .click('[data-id="settingsSelectEnvOptions"] button') // open the dropdown
+            .waitForElementPresent(`[data-id="dropdown-item-vm-paris"]`)
+            .refreshPage()
+            .waitForElementVisible('[data-id="treeViewLitreeViewItemcontracts"]') // wait loaded
+            .clickLaunchIcon('udapp')
+            .click('[data-id="settingsSelectEnvOptions"] button') // open the dropdown
+            .waitForElementPresent(`[data-id="dropdown-item-vm-paris"]`)
+            .click('[data-id="settingsSelectEnvOptions"] button') // close the dropdown
+            .pinGrid('vm-paris', false)
+            .click('[data-id="settingsSelectEnvOptions"] button') // open the dropdown
+            .waitForElementNotPresent(`[data-id="dropdown-item-vm-paris"]`)
+            .refreshPage()
+            .waitForElementVisible('[data-id="treeViewLitreeViewItemcontracts"]') // wait loaded
+            .clickLaunchIcon('udapp')
+            .click('[data-id="settingsSelectEnvOptions"] button') // open the dropdown
+            .waitForElementNotPresent(`[data-id="dropdown-item-vm-paris"]`)
     }
 }

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

@@ -179,6 +179,14 @@ module.exports = {
   },
 
   'Should select another provider #group1': async function (browser: NightwatchBrowser) {
+    await browser
+      .frameParent()
+      .useCss()
+      .clickLaunchIcon('udapp')
+      .pinGrid('vm-berlin', true)
+      .clickLaunchIcon('localPlugin')
+      .useXpath()
+      .frame(0)
     await clickAndCheckLog(browser, 'udapp:setEnvironmentMode', null, null, { context: 'vm-berlin' })
     await browser
       .frameParent()

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

@@ -80,6 +80,7 @@ export class Blockchain extends Plugin {
   providers: {[key: string]: VMProvider | InjectedProvider | NodeProvider}
   transactionContextAPI: TransactionContextAPI
   registeredPluginEvents: string[]
+  defaultPinnedProviders: string[]
   pinnedProviders: string[]
 
   // NOTE: the config object will need to be refactored out in remix-lib
@@ -112,7 +113,8 @@ export class Blockchain extends Plugin {
     this.networkcallid = 0
     this.networkStatus = { network: { name: ' - ', id: ' - ' } }
     this.registeredPluginEvents = []
-    this.pinnedProviders = ['vm-cancun', 'vm-shanghai', 'vm-mainnet-fork', 'vm-london', 'vm-berlin', 'vm-paris', 'walletconnect', 'injected-MetaMask', 'basic-http-provider', 'ganache-provider', 'hardhat-provider', 'foundry-provider']
+    this.defaultPinnedProviders = ['vm-cancun', 'vm-mainnet-fork', 'walletconnect', 'injected-MetaMask', 'basic-http-provider', 'hardhat-provider', 'foundry-provider']
+    this.pinnedProviders = []
     this.setupEvents()
     this.setupProviders()
   }
@@ -139,11 +141,25 @@ export class Blockchain extends Plugin {
 
     this.on('environmentExplorer', 'providerPinned', (name, provider) => {
       this.emit('shouldAddProvidertoUdapp', name, provider)
+      this.pinnedProviders.push(name)
+      this.call('config', 'setAppParameter', 'settings/pinned-providers', JSON.stringify(this.pinnedProviders))
     })
 
     this.on('environmentExplorer', 'providerUnpinned', (name, provider) => {
       this.emit('shouldRemoveProviderFromUdapp', name, provider)
+      const index = this.pinnedProviders.indexOf(name)
+      this.pinnedProviders.splice(index, 1)
+      this.call('config', 'setAppParameter', 'settings/pinned-providers', JSON.stringify(this.pinnedProviders))
     })
+
+    this.call('config', 'getAppParameter', 'settings/pinned-providers').then((providers) => {
+      if (!providers) {
+        this.call('config', 'setAppParameter', 'settings/pinned-providers', JSON.stringify(this.defaultPinnedProviders))
+        this.pinnedProviders = this.defaultPinnedProviders
+      } else {
+        this.pinnedProviders = JSON.parse(providers)
+      }
+    }).catch((error) => { console.log(error) })
   }
 
   onDeactivation() {

libs/remix-ui/run-tab/src/lib/components/environment.tsx

@@ -39,7 +39,7 @@ export function EnvironmentUI(props: EnvironmentProps) {
           </a>
         </CustomTooltip>
       </label>
-      <div className="udapp_environment">
+      <div className="udapp_environment" data-id={`selected-provider-${currentProvider && currentProvider.name}`}>
         <Dropdown id="selectExEnvOptions" data-id="settingsSelectEnvOptions" className="udapp_selectExEnvOptions">
           <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control" icon={null}>
             {isL2(currentProvider && currentProvider.displayName)}

libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@@ -320,7 +320,7 @@ export const TabsUI = (props: TabsUIProps) => {
         >
           <TabList className="d-flex flex-row align-items-center">
             {props.tabs.map((tab, i) => (
-              <Tab className="" key={tab.name}>
+              <Tab className="" key={tab.name} data-id={tab.id}>
                 {renderTab(tab, i)}
               </Tab>
             ))}