Merge branch 'master' of https://github.com/ethereum/remix-project into editorcontext

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

@@ -29,5 +29,31 @@ module.exports = {
     .waitForElementVisible('*[data-id="ganache-providerModalDialogModalBody-react"]')
     .modalFooterOKClick('ganache-provider')
     .waitForElementContainsText('*[data-id="settingsNetworkEnv"]', 'Custom (')
+  },
+
+  'Should switch to foundry provider, set a custom URL and fail to connect': function (browser: NightwatchBrowser) {
+    browser.waitForElementVisible('div[data-id="remixIdeIconPanel"]', 10000)
+    .click('*[data-id="Foundry Provider"]')
+    .waitForElementVisible('*[data-id="foundry-providerModalDialogModalBody-react"]')
+    .execute(() => {
+      (document.querySelector('*[data-id="foundry-providerModalDialogModalBody-react"] input') as any).focus()
+    }, [], () => {})
+    .clearValue('*[data-id="foundry-providerModalDialogModalBody-react"] input')
+    .setValue('*[data-id="foundry-providerModalDialogModalBody-react"] input', 'http://127.0.0.1:8084')
+    .modalFooterOKClick('foundry-provider')
+    .waitForElementContainsText('*[data-id="foundry-providerModalDialogModalBody-react"]', 'Error while connecting to the provider')
+    .modalFooterOKClick('foundry-provider')
+    .waitForElementNotVisible('*[data-id="foundry-providerModalDialogModalBody-react"]')
+    .waitForElementVisible('*[data-id="PermissionHandler-modal-footer-ok-react"]')
+    .click('*[data-id="PermissionHandler-modal-footer-ok-react"]')
+    .waitForElementNotVisible('*[data-id="PermissionHandler-modal-footer-ok-react"]')
+    .pause(1000)
+
+},
+  'Should switch to foundry provider, use the default foundry URL and succeed to connect': function (browser: NightwatchBrowser) {
+    browser.click('*[data-id="Foundry Provider"]')
+    .waitForElementVisible('*[data-id="foundry-providerModalDialogModalBody-react"]')
+    .modalFooterOKClick('foundry-provider')
+    .waitForElementContainsText('*[data-id="settingsNetworkEnv"]', 'Custom (')
   }
 }

apps/remix-ide/src/app.js

@@ -27,6 +27,7 @@ import { NotificationPlugin } from './app/plugins/notification'
 import { Blockchain } from './blockchain/blockchain.js'
 import { HardhatProvider } from './app/tabs/hardhat-provider'
 import { GanacheProvider } from './app/tabs/ganache-provider'
+import { FoundryProvider } from './app/tabs/foundry-provider'
 
 const isElectron = require('is-electron')
 
@@ -177,6 +178,7 @@ class AppComponent {
     const web3Provider = new Web3ProviderModule(blockchain)
     const hardhatProvider = new HardhatProvider(blockchain)
     const ganacheProvider = new GanacheProvider(blockchain)
+    const foundryProvider = new FoundryProvider(blockchain)
     // ----------------- convert offset to line/column service -----------
     const offsetToLineColumnConverter = new OffsetToLineColumnConverter()
     Registry.getInstance().put({
@@ -235,6 +237,7 @@ class AppComponent {
       storagePlugin,
       hardhatProvider,
       ganacheProvider,
+      foundryProvider,
       this.walkthroughService,
       search
     ])

apps/remix-ide/src/app/tabs/foundry-provider.tsx

@@ -0,0 +1,33 @@
+import * as packageJson from '../../../../../package.json'
+import { Plugin } from '@remixproject/engine'
+import { AppModal, AlertModal, ModalTypes } from '@remix-ui/app'
+import React from 'react' // eslint-disable-line
+import { Blockchain } from '../../blockchain/blockchain'
+import { ethers } from 'ethers'
+import { AbstractProvider } from './abstract-provider'
+
+const profile = {
+  name: 'foundry-provider',
+  displayName: 'Foundry Provider',
+  kind: 'provider',
+  description: 'Anvil',
+  methods: ['sendAsync'],
+  version: packageJson.version
+}
+
+export class FoundryProvider extends AbstractProvider {
+  constructor (blockchain) {
+    super(profile, blockchain, 'http://127.0.0.1:8545')
+  }
+
+  body (): JSX.Element {
+    return (
+      <div> Note: To run Anvil on your system, run
+        <div className="border p-1">curl -L https://foundry.paradigm.xyz | bash</div> 
+        <div className="border p-1">anvil</div>       
+        For more info, visit: <a href="https://github.com/foundry-rs/foundry" target="_blank">Foundry Documentation</a>
+        <div>Anvil JSON-RPC Endpoint:</div>
+      </div>
+    )
+  }
+}

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

@@ -127,6 +127,20 @@ export class RunTab extends ViewPlugin {
       }
     })
 
+    await this.call('blockchain', 'addProvider', {
+      name: 'Foundry Provider',
+      provider: {
+        async sendAsync (payload, callback) {
+          try {
+            const result = await udapp.call('foundry-provider', 'sendAsync', payload)
+            callback(null, result)
+          } catch (e) {
+            callback(e)
+          }
+        }
+      }
+    })
+
     await this.call('blockchain', 'addProvider', {
       name: 'Wallet Connect',
       provider: {

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

@@ -12,7 +12,7 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
 
   return (
     <div className="udapp_instanceContainer mt-3 border-0 list-group-item">
-      <label className="udapp_deployedContracts d-flex justify-content-between align-items-center pl-2 mb-0"
+      <label className="udapp_deployedContracts d-flex justify-content-between align-items-center pl-2 mb-1"
         title="Autogenerated generic user interfaces for interaction with deployed contracts">
         Deployed Contracts
         { instanceList.length > 0

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

@@ -206,9 +206,9 @@ export function UniversalDappUI (props: UdappProps) {
   return (
     <div className={`instance udapp_instance udapp_run-instance border-dark ${toggleExpander ? 'udapp_hidesub' : 'bg-light'}`} id={`instance${address}`} data-shared="universalDappUiInstance">
       <div className="udapp_title alert alert-secondary">
-        <button data-id={`universalDappUiTitleExpander${props.index}`} className="btn udapp_titleExpander" onClick={toggleClass}>
+        <span data-id={`universalDappUiTitleExpander${props.index}`} className="btn udapp_titleExpander" onClick={toggleClass}>
           <i className={`fas ${toggleExpander ? 'fa-angle-right' : 'fa-angle-down'}`} aria-hidden="true"></i>
-        </button>
+        </span>
         <div className="input-group udapp_nameNbuts">
           <div className="udapp_titleText input-group-prepend">
             <span className="input-group-text udapp_spanTitleText">

libs/remix-ui/run-tab/src/lib/css/run-tab.css

@@ -276,7 +276,7 @@
   color: var(--primary);
 }
 .udapp_titleExpander {
-  padding: 5px 7px;
+  margin-top: 2px;
 }
 .udapp_nameNbuts {
   display: contents;