UDapp account dropdown refactor

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

@@ -5,7 +5,9 @@ class SelectAccount extends EventEmitter {
   command (this: NightwatchBrowser, account?: string): NightwatchBrowser {
     if (account) {
       this.api
-        .click(`select[data-id="runTabSelectAccount"] [value="${account}"]`)
+        .click(`*[data-id="runTabSelectAccount"]`) //open the dropdown
+        .waitForElementVisible(`*[data-id="${account}"]`)
+        .click(`*[data-id="${account}"]`) //close the dropdown
         .perform(() => {
           this.emit('complete')
         })

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

@@ -4,35 +4,35 @@ import EventEmitter from 'events'
 class switchEnvironment extends EventEmitter {
   command (this: NightwatchBrowser, provider: string): NightwatchBrowser {
     this.api.useCss().waitForElementVisible('[data-id="settingsSelectEnvOptions"]')
-    .perform((done) => {
-      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'))      
-    
+      .perform((done) => {
+        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/ballot_0_4_14.test.ts

@@ -36,6 +36,7 @@ module.exports = {
     browser.pause(500)
       .clickLaunchIcon('udapp')
       .selectAccount('0xCA35b7d915458EF540aDe6068dFe2F44E8fa733c')
+      .pause()
       .setValue('input[placeholder="uint8 _numProposals"]', '2')
       .click('*[data-id="Deploy - transact (not payable)"]')
       .waitForElementPresent('*[data-id="universalDappUiContractActionWrapper"]', 60000)

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

@@ -300,9 +300,10 @@ module.exports = {
       browser
         .clickLaunchIcon('udapp')
         .switchEnvironment('vm-mainnet-fork')
+        .click('*[data-id="runTabSelectAccount"]')
         .waitForElementPresent({
           locateStrategy: 'css selector',
-          selector: 'select[data-id="runTabSelectAccount"] option[value="0xdD870fA1b7C4700F2BD7f44238821C26f7392148"]',
+          selector: '*[data-id="0xdD870fA1b7C4700F2BD7f44238821C26f7392148"]',
           timeout: 240000
         })
         .executeScriptInTerminal(`web3.eth.getCode('0x180587b00c8642e2c7ac3a758712d97e6f7bdcc7')`) // mainnet contract
@@ -361,10 +362,10 @@ module.exports = {
         Resolver resolver = ens.resolver(node);
         console.log(resolver.addr(node));
     }
-    `    
+    `
     if (runMasterTests) {
       const path = "//*[@class='view-line' and contains(.,'resolveENS') and contains(.,'view')]//span//span[contains(.,'(')]"
-      
+
       browser
         // .clickLaunchIcon('udapp')
         .switchEnvironment('vm-mainnet-fork')
@@ -401,8 +402,8 @@ module.exports = {
       .waitForElementVisible('#editorView')
       .pause(10000) // the parser need to parse the code
       .useXpath()
-      .scrollToLine(3)      
-      .click(path)      
+      .scrollToLine(3)
+      .click(path)
       .perform(function () {
         const actions = this.actions({ async: true });
         return actions

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

@@ -245,11 +245,13 @@ module.exports = {
       .setSolidityCompilerVersion('soljson-v0.8.17+commit.8df45f5f.js')
       .clickLaunchIcon('udapp')
       .switchEnvironment('vm-mainnet-fork')
+      .click('*[data-id="runTabSelectAccount"]')
       .waitForElementPresent({
         locateStrategy: 'css selector',
-        selector: 'select[data-id="runTabSelectAccount"] option[value="0xdD870fA1b7C4700F2BD7f44238821C26f7392148"]',
+        selector: `*[data-id="0xdD870fA1b7C4700F2BD7f44238821C26f7392148"]`,
         timeout: 250000
       }) // wait for the udapp to load the list of accounts
+      .click('*[data-id="0xdD870fA1b7C4700F2BD7f44238821C26f7392148"]')
       .selectContract('MyResolver')
       .createContract('')
       .clickInstance(0)

libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx

@@ -29,7 +29,7 @@ export const CustomToggle = React.forwardRef(
       className={className.replace('dropdown-toggle', '')}
     >
       <div className="d-flex">
-        <div className="mr-auto text-nowrap text-truncate overflow-hidden">{children}</div>
+        <div className="mr-auto text-nowrap text-truncate overflow-hidden" data-id={`dropdown-content`}>{children}</div>
         {icon && (
           <div className="pr-1">
             <i className={`${icon} pr-1`}></i>

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

@@ -4,7 +4,8 @@ import { FormattedMessage, useIntl } from 'react-intl'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { AccountProps } from '../types'
 import { PassphrasePrompt } from './passphrase'
-import { CustomTooltip } from '@remix-ui/helper'
+import { CustomMenu, CustomToggle, CustomTooltip } from '@remix-ui/helper'
+import { Dropdown } from 'react-bootstrap'
 const _paq = window._paq = window._paq || []
 
 export function AccountUI(props: AccountProps) {
@@ -235,22 +236,27 @@ export function AccountUI(props: AccountProps) {
         {props.accounts.isRequesting && <i className="fa fa-spinner fa-pulse ml-2" aria-hidden="true"></i>}
       </label>
       <div className="udapp_account">
-        <select
-          id="txorigin"
-          data-id="runTabSelectAccount"
-          name="txorigin"
-          className="form-control udapp_select custom-select pr-4"
-          value={selectedAccount || ''}
-          onChange={(e) => {
-            props.setAccount(e.target.value)
-          }}
-        >
-          {accounts.map((value, index) => (
-            <option value={value} key={index}>
-              {loadedAccounts[value]}
-            </option>
-          ))}
-        </select>
+        <Dropdown className="udapp_selectExEnvOptions" data-id="runTabSelectAccount">
+          <Dropdown.Toggle as={CustomToggle} icon={null} id="txorigin" data-id="runTabSelectAccount" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control">
+            {selectedAccount ? loadedAccounts[selectedAccount] : ''}
+          </Dropdown.Toggle>
+          <Dropdown.Menu as={CustomMenu} className="w-100 custom-dropdown-items" data-id="custom-dropdown-items">
+            {accounts && accounts.length > 0 ? accounts.map((value, index) => (
+              <Dropdown.Item
+                key={index}
+                eventKey={selectedAccount}
+                onSelect={(e) => {
+                  props.setAccount(value)
+                }}
+                data-id={`txOriginSelectAccountItem-${value}`}
+              >
+                <span data-id={`${value}`}>
+                  {loadedAccounts[value]}
+                </span>
+              </Dropdown.Item>
+            )) : <Dropdown.Item></Dropdown.Item>}
+          </Dropdown.Menu>
+        </Dropdown>
       </div>
     </div>
   )
@@ -280,4 +286,4 @@ const EIP712_Example = {
       { name: 'createdAt', type: 'uint256' },
     ],
   },
-}
+}