Merge branch 'master' into ethskills

Author: STetsing

apps/remix-dapp/src/locales/en/udapp.json

@@ -54,11 +54,11 @@
   "udapp.forkVmStateDesc1":"Forking state will create a new environment with same state as selected environment",
   "udapp.forkVmStateDesc2":"New environment will be pinned, which can be unpinned or deleted using Environment Explorer",
   "udapp.fork": "Fork",
-  "udapp.resetVmStateTitle": "Reset VM state",
+  "udapp.resetVmStateTitle": "Environment state reset",
   "udapp.resetVmStateDesc1": "Resetting the state of this VM will delete the associated transaction details in this Workspace.",
   "udapp.resetVmStateDesc2": "It will also delete the data of contracts deployed and pinned in this Workspace.",
   "udapp.resetVmStateDesc3": "Do you want to continue?",
-  "udapp.reset": "Reset",
+  "udapp.reset": "Yes reset",
   "udapp.delete": "Delete",
   "udapp.injectedTitle": "Unfortunately it's not possible to create an account using injected provider. Please create the account directly from your provider (i.e metamask or other of the same type).",
   "udapp.createSmartAccount": "Create a Safe Smart Account",
@@ -88,6 +88,8 @@
 
   "udapp._comment_instanceContainerUI.tsx": "libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx",
   "udapp.deployedContracts": "Deployed Contracts",
+  "udapp.noDeployedContracts": "There is no contract to show.",
+  "udapp.deployFirstContract": "Deploy your first contract, or learn how to do it following our in-app tutorials.",
   "udapp.deployAndRunClearInstances": "Clear instances list and reset recorder",
   "udapp.deployAndRunNoInstanceText": "Currently you have no contract instances to interact with.",
   "udapp.tooltipText6": "Autogenerated generic user interfaces for interaction with deployed contracts",

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

@@ -15,31 +15,34 @@ class addAtAddressInstance extends EventEmitter {
 
 function addInstance (browser: NightwatchBrowser, address: string, isValidFormat: boolean, isValidChecksum: boolean, isAbi: boolean, callback: VoidFunction) {
   browser
-  .clickLaunchIcon('udapp')
-  .waitForElementVisible('.ataddressinput')
-  .click('.ataddressinput')
-  .setValue('.ataddressinput', address, function () {
-    if (!isValidFormat || !isValidChecksum) browser.assert.elementPresent('button[id^="runAndDeployAtAddressButton"]:disabled')
-    else if (isAbi) {
-      browser
-        .click({
-          selector: '//*[@id="runAndDeployAtAddressButtonContainer"]',
-          locateStrategy: 'xpath'
-         })
-        .waitForElementPresent('[data-id="udappNotify-modal-footer-ok-react"]', 5000)
-        .execute(function () {
-          const modal = document.querySelector('[data-id="udappNotify-modal-footer-ok-react"]') as any
+    .clickLaunchIcon('udapp')
+    .waitForElementVisible('[data-id="addDeployedContract"]')
+    .pause(500) // Wait for any UI transitions to complete
+    .execute(function () {
+    // Use JavaScript to click the button, avoiding sticky header issues
+      const button = document.querySelector('[data-id="addDeployedContract"]') as HTMLElement
+      if (button) {
+        button.scrollIntoView({ behavior: 'auto', block: 'center' })
+        button.click()
+      }
+    })
+    .waitForElementVisible('[data-id="deployedContractAddressInput"]')
+    .setValue('[data-id="deployedContractAddressInput"]', address, function () {
+      if (!isValidFormat || !isValidChecksum) browser.assert.elementPresent('[data-id="addDeployedContractButton"]:disabled')
+      else if (isAbi) {
+        browser
+          .click('[data-id="addDeployedContractButton"]') // Click Add button in dialog
+          .waitForElementPresent('[data-id="deployedContractsAtAddress-modal-footer-ok-react"]', 5000)
+          .execute(function () {
+            const modal = document.querySelector('[data-id="deployedContractsAtAddress-modal-footer-ok-react"]') as any
 
-          modal.click()
-        })
-    } else {
-      browser.click({
-        selector: '//*[@id="runAndDeployAtAddressButtonContainer"]',
-        locateStrategy: 'xpath'
-      })
-    }
-    callback()
-  })
+            modal.click()
+          })
+      } else {
+        browser.click('[data-id="addDeployedContractButton"]') // Click Add button in dialog
+      }
+      callback()
+    })
 }
 
 module.exports = addAtAddressInstance

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

@@ -17,6 +17,8 @@ class AddFile extends EventEmitter {
 
 function addFile(browser: NightwatchBrowser, name: string, content: NightwatchContractContent, readMeFile:string, done: VoidFunction) {
   const readmeSelector = `li[data-id="treeViewLitreeViewItem${readMeFile}"]`
+  const anyTreeItemSelector = 'li[data-id^="treeViewLitreeViewItem"]' // Any item in tree
+
   browser
     .isVisible({
       selector: "//*[@data-id='sidePanelSwapitTitle' and contains(.,'File explorer')]",
@@ -28,12 +30,39 @@ function addFile(browser: NightwatchBrowser, name: string, content: NightwatchCo
         browser.clickLaunchIcon('filePanel')
       }
     })
+    .waitForElementPresent('[data-test-id="virtuoso-scroller"]', 10000)
+    .pause(500)
+    // Ensure file tree is loaded by waiting for at least one tree item
+    .waitForElementPresent(anyTreeItemSelector, 10000)
+    .pause(500)
+    // Force virtuoso to render all items by scrolling to bottom and back
     .execute(function () {
       const container = document.querySelector('[data-test-id="virtuoso-scroller"]');
-      container.scrollTop = container.scrollHeight;
+      if (container) {
+        // Scroll to bottom to force rendering
+        container.scrollTop = container.scrollHeight;
+      }
     })
-    .scrollInto(readmeSelector)
-    .waitForElementVisible(readmeSelector)
+    .pause(1000) // Give time for virtuoso to render items
+    .execute(function () {
+      const container = document.querySelector('[data-test-id="virtuoso-scroller"]');
+      if (container) {
+        // Scroll back to top
+        container.scrollTop = 0;
+      }
+    })
+    .pause(1000)
+    // Now wait for README to be present in DOM
+    .waitForElementPresent(readmeSelector, 10000)
+    // Use scrollIntoView to make it visible
+    .execute(function (selector) {
+      const element = document.querySelector(selector);
+      if (element) {
+        element.scrollIntoView({ behavior: 'auto', block: 'center' });
+      }
+    }, [readmeSelector])
+    .pause(500)
+    .waitForElementVisible(readmeSelector, 10000)
     .click(readmeSelector).pause(1000) // focus on root directory
     .isVisible({
       selector: `//*[@data-id="treeViewLitreeViewItem${name}"]`,

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

@@ -0,0 +1,37 @@
+import { NightwatchBrowser } from 'nightwatch'
+import EventEmitter from 'events'
+
+class ClearDeployedContract extends EventEmitter {
+  command (this: NightwatchBrowser, index: number): NightwatchBrowser {
+    this.api.perform((done: VoidFunction) => {
+      clearContract(this.api, index, () => {
+        done()
+        this.emit('complete')
+      })
+    })
+    return this
+  }
+}
+
+function clearContract (browser: NightwatchBrowser, index: number, callback: VoidFunction) {
+  browser
+    .clickLaunchIcon('udapp')
+    .waitForElementPresent(`[data-id="contractKebabIcon-${index}"]`)
+    .execute(function (index) {
+      // Use JavaScript to click the button, avoiding sticky header issues
+      const optionsMenu = document.querySelector(`[data-id="contractKebabIcon-${index}"]`) as HTMLElement
+      if (optionsMenu) {
+        optionsMenu.scrollIntoView({ behavior: 'auto', block: 'center' })
+      }
+    }, [index])
+    .waitForElementVisible(`[data-id="contractKebabIcon-${index}"]`)
+    .click(`[data-id="contractKebabIcon-${index}"]`) // Click kebab icon
+    .waitForElementVisible('[data-id="clear"]')
+    .click('[data-id="clear"]') // Click "Clear" option in kebab menu
+    .pause(500)
+    .perform(() => {
+      callback()
+    })
+}
+
+module.exports = ClearDeployedContract

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

@@ -0,0 +1,45 @@
+import { NightwatchBrowser } from 'nightwatch'
+import EventEmitter from 'events'
+
+class ClearDeployedContracts extends EventEmitter {
+  command (this: NightwatchBrowser): NightwatchBrowser {
+    this.api.perform((done: VoidFunction) => {
+      clearContracts(this.api, () => {
+        done()
+        this.emit('complete')
+      })
+    })
+    return this
+  }
+}
+
+function clearContracts (browser: NightwatchBrowser, callback: VoidFunction) {
+  browser
+    .clickLaunchIcon('udapp')
+    .waitForElementVisible('[data-id="deployedContractsContainer"]')
+    .waitForElementVisible('[data-id="clearAllDeployedContracts"]')
+    .pause(500)
+    .execute(function () {
+      // Use JavaScript to click the button, avoiding sticky header issues
+      const clearBtn = document.querySelector('[data-id="clearAllDeployedContracts"]') as HTMLElement
+      if (clearBtn) {
+        clearBtn.scrollIntoView({ behavior: 'auto', block: 'center' })
+        clearBtn.click()
+      }
+    })
+    .waitForElementVisible('[data-id="confirmClearAll"]')
+    .execute(function () {
+      // Use JavaScript to click the confirm button
+      const confirmBtn = document.querySelector('[data-id="confirmClearAll"]') as HTMLElement
+      if (confirmBtn) {
+        confirmBtn.scrollIntoView({ behavior: 'auto', block: 'center' })
+        confirmBtn.click()
+      }
+    })
+    .pause(500)
+    .perform(() => {
+      callback()
+    })
+}
+
+module.exports = ClearDeployedContracts

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

@@ -7,31 +7,29 @@ import EventEmitter from 'events'
 class ClickFunction extends EventEmitter {
   command(
     this: NightwatchBrowser,
-    fnFullName: string,
+    instanceIndex: number,
+    functionIndex: number,
     expectedInput?: NightwatchClickFunctionExpectedInput
   ): NightwatchBrowser {
     this.api
-      .waitForElementPresent('.instance *[data-bs-title="' + fnFullName + '"]')
+      .execute(function (instanceIndex, functionIndex) {
+        // Use JavaScript to click the button, avoiding sticky header issues
+        const executeButton = document.querySelector(`[data-id="deployedContractItem-${instanceIndex}-button-${functionIndex}"]`) as HTMLElement
+        if (executeButton) {
+          executeButton.scrollIntoView({ behavior: 'auto', block: 'center' })
+        }
+      }, [instanceIndex, functionIndex])
       .perform(function (client, done) {
-        client.execute(
-          function () {
-            document.querySelector('#runTabView').scrollTop =
-              document.querySelector('#runTabView').scrollHeight
-          },
-          [],
-          function () {
-            if (expectedInput) {
-              client.setValue(
-                '#runTabView input[data-bs-title="' + expectedInput.types + '"]',
-                expectedInput.values,
-                (_) => _
-              )
-            }
-            done()
-          }
-        )
+        if (expectedInput) {
+          client.setValue(
+            `[data-id="deployedContractItem-${instanceIndex}-input-${functionIndex}"]`,
+            expectedInput.values,
+            (_) => _
+          )
+        }
+        done()
       })
-      .scrollAndClick('.instance *[data-bs-title="' + fnFullName + '"]')
+      .click(`[data-id="deployedContractItem-${instanceIndex}-button-${functionIndex}"]`)
       .pause(2000)
       .perform(() => {
         this.emit('complete')

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

@@ -3,7 +3,7 @@ import EventEmitter from 'events'
 
 class ClickInstance extends EventEmitter {
   command (this: NightwatchBrowser, index: number): NightwatchBrowser {
-    const selector = `[data-id="universalDappUiTitleExpander${index}"]`
+    const selector = `[data-id="deployedContractItem-${index}"]`
 
     this.api.waitForElementPresent({
       locateStrategy: 'css selector',

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

@@ -7,27 +7,42 @@ class ConnectToExternalHttpProvider extends EventEmitter {
       (result) => {
         if (result.status as any === -1) {
           console.log("No connection to external provider found. Adding one.", url)
-          browser
+          this.api
+            // Close any existing modal
             .click({
               locateStrategy: 'css selector',
               selector: '[data-id="basic-http-provider-modal-footer-ok-react"]',
               abortOnFailure: false,
               suppressNotFoundErrors: true,
               timeout: 5000
             })
+            // Close any open sub-category dropdown first
+            .click({
+              locateStrategy: 'css selector',
+              selector: 'body',
+              abortOnFailure: false,
+              suppressNotFoundErrors: true
+            })
+            .pause(500)
+            // Now switch to the provider
             .switchEnvironment('basic-http-provider')
-            .waitForElementPresent('[data-id="basic-http-provider-modal-footer-ok-react"]')
+            .waitForElementPresent('[data-id="basic-http-provider-modal-footer-ok-react"]', 10000)
+            .pause(500)
             .execute(() => {
-              (document.querySelector('*[data-id="basic-http-providerModalDialogContainer-react"] input[data-id="modalDialogCustomPromp"]') as any).focus()
+              const input = document.querySelector('*[data-id="basic-http-providerModalDialogContainer-react"] input[data-id="modalDialogCustomPromp"]') as any
+              if (input) input.focus()
             }, [], () => { })
+            .clearValue('[data-id="modalDialogCustomPromp"]')
             .setValue('[data-id="modalDialogCustomPromp"]', url)
+            .pause(500)
             .modalFooterOKClick('basic-http-provider')
-            .perform((done) => {
+            .pause(1000)
+            .perform((done: VoidFunction) => {
               done()
               this.emit('complete')
             })
         } else {
-          this.api.perform((done) => {
+          this.api.perform((done: VoidFunction) => {
             done()
             this.emit('complete')
           })

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

@@ -14,17 +14,53 @@ class CreateContract extends EventEmitter {
 }
 
 function createContract (browser: NightwatchBrowser, inputParams: string, callback: VoidFunction) {
+  browser.execute(function () {
+    // Use JavaScript to click the button, avoiding sticky header issues
+    const deployButton = document.querySelector('[data-id="deployButton"]') as HTMLElement
+    if (deployButton) {
+      deployButton.scrollIntoView({ behavior: 'auto', block: 'center' })
+    }
+  })
   if (inputParams) {
-    browser.setValue('.udapp_contractActionsContainerSingle > input', inputParams, function () {
-      browser
-        .pause(1000) // wait to get the button enabled
-        .waitForElementVisible('.udapp_contractActionsContainerSingle button')
-        .click('.udapp_contractActionsContainerSingle button').pause(500).perform(function () { callback() })
+    const params = inputParams.split(',')
+
+    // Get the number of constructor inputs
+    browser.execute(function () {
+      const inputs = document.querySelectorAll('input[data-id^="constructorInput"]')
+      return inputs.length
+    }, [], function (result: any) {
+      const inputCount = result.value
+
+      // Fill each input sequentially using Nightwatch setValue
+      const fillInputs = (index: number) => {
+        if (index >= inputCount) {
+          // All inputs filled, now deploy
+          browser
+            .pause(500) // wait for React to update
+            .waitForElementVisible('[data-id="deployButton"]')
+            .click('[data-id="deployButton"]')
+            .pause(500)
+            .perform(function () { callback() })
+          return
+        }
+
+        const selector = `input[data-id="constructorInput${index}"]`
+        const value = params[index]
+
+        browser
+          .waitForElementVisible(selector, 5000)
+          .clearValue(selector)
+          .setValue(selector, value)
+          .pause(1000)
+          .perform(() => fillInputs(index + 1))
+      }
+
+      fillInputs(0)
     })
   } else {
     browser
-      .waitForElementVisible('.udapp_contractActionsContainerSingle button')
-      .click('.udapp_contractActionsContainerSingle button')
+      .waitForElementVisible('[data-id="deployButton"]')
+      .click('[data-id="deployButton"]')
       .pause(500)
       .perform(function () { callback() })
   }