Fixed bugs and tests

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

@@ -12,6 +12,7 @@ class GetEditorValue extends EventEmitter {
         done()
         const value = typeof result.value === 'string' ? result.value : null
 
+        console.log('value')
         callback(value)
         this.emit('complete')
       })

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

@@ -34,7 +34,7 @@ function removeFile (browser: NightwatchBrowser, path: string, workspace: string
     contextMenuClick(document.querySelector('[data-path="' + path + '"]'))
   }, [path], function () {
     browser
-      .waitForElementVisible('#menuitemdelete')
+      .waitForElementVisible('#menuitemdelete', 60000)
       .click('#menuitemdelete')
       .pause(2000)
       .perform(() => {

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

@@ -82,7 +82,7 @@ module.exports = {
   'Close Remixd': function (browser) {
     browser
       .clickLaunchIcon('pluginManager')
-      .scrollAndClick('#pluginManager article[id="remixPluginManagerListItem_remixd"] button')
+      .scrollAndClick('#pluginManager *[data-id="pluginManagerComponentDeactivateButtonremixd"]')
       .end()
   }
 }

apps/remix-ide/contracts/.deps/github/OpenZeppelin/openzeppelin-contracts/contracts/token/ERC20/ERC20.sol

@@ -1,355 +0,0 @@
-// SPDX-License-Identifier: MIT
-
-pragma solidity ^0.8.0;
-
-import "./IERC20.sol";
-import "./extensions/IERC20Metadata.sol";
-import "../../utils/Context.sol";
-
-/**
- * @dev Implementation of the {IERC20} interface.
- *
- * This implementation is agnostic to the way tokens are created. This means
- * that a supply mechanism has to be added in a derived contract using {_mint}.
- * For a generic mechanism see {ERC20PresetMinterPauser}.
- *
- * TIP: For a detailed writeup see our guide
- * https://forum.zeppelin.solutions/t/how-to-implement-erc20-supply-mechanisms/226[How
- * to implement supply mechanisms].
- *
- * We have followed general OpenZeppelin Contracts guidelines: functions revert
- * instead returning `false` on failure. This behavior is nonetheless
- * conventional and does not conflict with the expectations of ERC20
- * applications.
- *
- * Additionally, an {Approval} event is emitted on calls to {transferFrom}.
- * This allows applications to reconstruct the allowance for all accounts just
- * by listening to said events. Other implementations of the EIP may not emit
- * these events, as it isn't required by the specification.
- *
- * Finally, the non-standard {decreaseAllowance} and {increaseAllowance}
- * functions have been added to mitigate the well-known issues around setting
- * allowances. See {IERC20-approve}.
- */
-contract ERC20 is Context, IERC20, IERC20Metadata {
-    mapping(address => uint256) private _balances;
-
-    mapping(address => mapping(address => uint256)) private _allowances;
-
-    uint256 private _totalSupply;
-
-    string private _name;
-    string private _symbol;
-
-    /**
-     * @dev Sets the values for {name} and {symbol}.
-     *
-     * The default value of {decimals} is 18. To select a different value for
-     * {decimals} you should overload it.
-     *
-     * All two of these values are immutable: they can only be set once during
-     * construction.
-     */
-    constructor(string memory name_, string memory symbol_) {
-        _name = name_;
-        _symbol = symbol_;
-    }
-
-    /**
-     * @dev Returns the name of the token.
-     */
-    function name() public view virtual override returns (string memory) {
-        return _name;
-    }
-
-    /**
-     * @dev Returns the symbol of the token, usually a shorter version of the
-     * name.
-     */
-    function symbol() public view virtual override returns (string memory) {
-        return _symbol;
-    }
-
-    /**
-     * @dev Returns the number of decimals used to get its user representation.
-     * For example, if `decimals` equals `2`, a balance of `505` tokens should
-     * be displayed to a user as `5.05` (`505 / 10 ** 2`).
-     *
-     * Tokens usually opt for a value of 18, imitating the relationship between
-     * Ether and Wei. This is the value {ERC20} uses, unless this function is
-     * overridden;
-     *
-     * NOTE: This information is only used for _display_ purposes: it in
-     * no way affects any of the arithmetic of the contract, including
-     * {IERC20-balanceOf} and {IERC20-transfer}.
-     */
-    function decimals() public view virtual override returns (uint8) {
-        return 18;
-    }
-
-    /**
-     * @dev See {IERC20-totalSupply}.
-     */
-    function totalSupply() public view virtual override returns (uint256) {
-        return _totalSupply;
-    }
-
-    /**
-     * @dev See {IERC20-balanceOf}.
-     */
-    function balanceOf(address account) public view virtual override returns (uint256) {
-        return _balances[account];
-    }
-
-    /**
-     * @dev See {IERC20-transfer}.
-     *
-     * Requirements:
-     *
-     * - `recipient` cannot be the zero address.
-     * - the caller must have a balance of at least `amount`.
-     */
-    function transfer(address recipient, uint256 amount) public virtual override returns (bool) {
-        _transfer(_msgSender(), recipient, amount);
-        return true;
-    }
-
-    /**
-     * @dev See {IERC20-allowance}.
-     */
-    function allowance(address owner, address spender) public view virtual override returns (uint256) {
-        return _allowances[owner][spender];
-    }
-
-    /**
-     * @dev See {IERC20-approve}.
-     *
-     * Requirements:
-     *
-     * - `spender` cannot be the zero address.
-     */
-    function approve(address spender, uint256 amount) public virtual override returns (bool) {
-        _approve(_msgSender(), spender, amount);
-        return true;
-    }
-
-    /**
-     * @dev See {IERC20-transferFrom}.
-     *
-     * Emits an {Approval} event indicating the updated allowance. This is not
-     * required by the EIP. See the note at the beginning of {ERC20}.
-     *
-     * Requirements:
-     *
-     * - `sender` and `recipient` cannot be the zero address.
-     * - `sender` must have a balance of at least `amount`.
-     * - the caller must have allowance for ``sender``'s tokens of at least
-     * `amount`.
-     */
-    function transferFrom(
-        address sender,
-        address recipient,
-        uint256 amount
-    ) public virtual override returns (bool) {
-        _transfer(sender, recipient, amount);
-
-        uint256 currentAllowance = _allowances[sender][_msgSender()];
-        require(currentAllowance >= amount, "ERC20: transfer amount exceeds allowance");
-        unchecked {
-            _approve(sender, _msgSender(), currentAllowance - amount);
-        }
-
-        return true;
-    }
-
-    /**
-     * @dev Atomically increases the allowance granted to `spender` by the caller.
-     *
-     * This is an alternative to {approve} that can be used as a mitigation for
-     * problems described in {IERC20-approve}.
-     *
-     * Emits an {Approval} event indicating the updated allowance.
-     *
-     * Requirements:
-     *
-     * - `spender` cannot be the zero address.
-     */
-    function increaseAllowance(address spender, uint256 addedValue) public virtual returns (bool) {
-        _approve(_msgSender(), spender, _allowances[_msgSender()][spender] + addedValue);
-        return true;
-    }
-
-    /**
-     * @dev Atomically decreases the allowance granted to `spender` by the caller.
-     *
-     * This is an alternative to {approve} that can be used as a mitigation for
-     * problems described in {IERC20-approve}.
-     *
-     * Emits an {Approval} event indicating the updated allowance.
-     *
-     * Requirements:
-     *
-     * - `spender` cannot be the zero address.
-     * - `spender` must have allowance for the caller of at least
-     * `subtractedValue`.
-     */
-    function decreaseAllowance(address spender, uint256 subtractedValue) public virtual returns (bool) {
-        uint256 currentAllowance = _allowances[_msgSender()][spender];
-        require(currentAllowance >= subtractedValue, "ERC20: decreased allowance below zero");
-        unchecked {
-            _approve(_msgSender(), spender, currentAllowance - subtractedValue);
-        }
-
-        return true;
-    }
-
-    /**
-     * @dev Moves `amount` of tokens from `sender` to `recipient`.
-     *
-     * This internal function is equivalent to {transfer}, and can be used to
-     * e.g. implement automatic token fees, slashing mechanisms, etc.
-     *
-     * Emits a {Transfer} event.
-     *
-     * Requirements:
-     *
-     * - `sender` cannot be the zero address.
-     * - `recipient` cannot be the zero address.
-     * - `sender` must have a balance of at least `amount`.
-     */
-    function _transfer(
-        address sender,
-        address recipient,
-        uint256 amount
-    ) internal virtual {
-        require(sender != address(0), "ERC20: transfer from the zero address");
-        require(recipient != address(0), "ERC20: transfer to the zero address");
-
-        _beforeTokenTransfer(sender, recipient, amount);
-
-        uint256 senderBalance = _balances[sender];
-        require(senderBalance >= amount, "ERC20: transfer amount exceeds balance");
-        unchecked {
-            _balances[sender] = senderBalance - amount;
-        }
-        _balances[recipient] += amount;
-
-        emit Transfer(sender, recipient, amount);
-
-        _afterTokenTransfer(sender, recipient, amount);
-    }
-
-    /** @dev Creates `amount` tokens and assigns them to `account`, increasing
-     * the total supply.
-     *
-     * Emits a {Transfer} event with `from` set to the zero address.
-     *
-     * Requirements:
-     *
-     * - `account` cannot be the zero address.
-     */
-    function _mint(address account, uint256 amount) internal virtual {
-        require(account != address(0), "ERC20: mint to the zero address");
-
-        _beforeTokenTransfer(address(0), account, amount);
-
-        _totalSupply += amount;
-        _balances[account] += amount;
-        emit Transfer(address(0), account, amount);
-
-        _afterTokenTransfer(address(0), account, amount);
-    }
-
-    /**
-     * @dev Destroys `amount` tokens from `account`, reducing the
-     * total supply.
-     *
-     * Emits a {Transfer} event with `to` set to the zero address.
-     *
-     * Requirements:
-     *
-     * - `account` cannot be the zero address.
-     * - `account` must have at least `amount` tokens.
-     */
-    function _burn(address account, uint256 amount) internal virtual {
-        require(account != address(0), "ERC20: burn from the zero address");
-
-        _beforeTokenTransfer(account, address(0), amount);
-
-        uint256 accountBalance = _balances[account];
-        require(accountBalance >= amount, "ERC20: burn amount exceeds balance");
-        unchecked {
-            _balances[account] = accountBalance - amount;
-        }
-        _totalSupply -= amount;
-
-        emit Transfer(account, address(0), amount);
-
-        _afterTokenTransfer(account, address(0), amount);
-    }
-
-    /**
-     * @dev Sets `amount` as the allowance of `spender` over the `owner` s tokens.
-     *
-     * This internal function is equivalent to `approve`, and can be used to
-     * e.g. set automatic allowances for certain subsystems, etc.
-     *
-     * Emits an {Approval} event.
-     *
-     * Requirements:
-     *
-     * - `owner` cannot be the zero address.
-     * - `spender` cannot be the zero address.
-     */
-    function _approve(
-        address owner,
-        address spender,
-        uint256 amount
-    ) internal virtual {
-        require(owner != address(0), "ERC20: approve from the zero address");
-        require(spender != address(0), "ERC20: approve to the zero address");
-
-        _allowances[owner][spender] = amount;
-        emit Approval(owner, spender, amount);
-    }
-
-    /**
-     * @dev Hook that is called before any transfer of tokens. This includes
-     * minting and burning.
-     *
-     * Calling conditions:
-     *
-     * - when `from` and `to` are both non-zero, `amount` of ``from``'s tokens
-     * will be transferred to `to`.
-     * - when `from` is zero, `amount` tokens will be minted for `to`.
-     * - when `to` is zero, `amount` of ``from``'s tokens will be burned.
-     * - `from` and `to` are never both zero.
-     *
-     * To learn more about hooks, head to xref:ROOT:extending-contracts.adoc#using-hooks[Using Hooks].
-     */
-    function _beforeTokenTransfer(
-        address from,
-        address to,
-        uint256 amount
-    ) internal virtual {}
-
-    /**
-     * @dev Hook that is called after any transfer of tokens. This includes
-     * minting and burning.
-     *
-     * Calling conditions:
-     *
-     * - when `from` and `to` are both non-zero, `amount` of ``from``'s tokens
-     * has been transferred to `to`.
-     * - when `from` is zero, `amount` tokens have been minted for `to`.
-     * - when `to` is zero, `amount` of ``from``'s tokens have been burned.
-     * - `from` and `to` are never both zero.
-     *
-     * To learn more about hooks, head to xref:ROOT:extending-contracts.adoc#using-hooks[Using Hooks].
-     */
-    function _afterTokenTransfer(
-        address from,
-        address to,
-        uint256 amount
-    ) internal virtual {}
-}

apps/remix-ide/contracts/.deps/github/OpenZeppelin/openzeppelin-contracts/contracts/token/ERC20/IERC20.sol

@@ -1,81 +0,0 @@
-// SPDX-License-Identifier: MIT
-
-pragma solidity ^0.8.0;
-
-/**
- * @dev Interface of the ERC20 standard as defined in the EIP.
- */
-interface IERC20 {
-    /**
-     * @dev Returns the amount of tokens in existence.
-     */
-    function totalSupply() external view returns (uint256);
-
-    /**
-     * @dev Returns the amount of tokens owned by `account`.
-     */
-    function balanceOf(address account) external view returns (uint256);
-
-    /**
-     * @dev Moves `amount` tokens from the caller's account to `recipient`.
-     *
-     * Returns a boolean value indicating whether the operation succeeded.
-     *
-     * Emits a {Transfer} event.
-     */
-    function transfer(address recipient, uint256 amount) external returns (bool);
-
-    /**
-     * @dev Returns the remaining number of tokens that `spender` will be
-     * allowed to spend on behalf of `owner` through {transferFrom}. This is
-     * zero by default.
-     *
-     * This value changes when {approve} or {transferFrom} are called.
-     */
-    function allowance(address owner, address spender) external view returns (uint256);
-
-    /**
-     * @dev Sets `amount` as the allowance of `spender` over the caller's tokens.
-     *
-     * Returns a boolean value indicating whether the operation succeeded.
-     *
-     * IMPORTANT: Beware that changing an allowance with this method brings the risk
-     * that someone may use both the old and the new allowance by unfortunate
-     * transaction ordering. One possible solution to mitigate this race
-     * condition is to first reduce the spender's allowance to 0 and set the
-     * desired value afterwards:
-     * https://github.com/ethereum/EIPs/issues/20#issuecomment-263524729
-     *
-     * Emits an {Approval} event.
-     */
-    function approve(address spender, uint256 amount) external returns (bool);
-
-    /**
-     * @dev Moves `amount` tokens from `sender` to `recipient` using the
-     * allowance mechanism. `amount` is then deducted from the caller's
-     * allowance.
-     *
-     * Returns a boolean value indicating whether the operation succeeded.
-     *
-     * Emits a {Transfer} event.
-     */
-    function transferFrom(
-        address sender,
-        address recipient,
-        uint256 amount
-    ) external returns (bool);
-
-    /**
-     * @dev Emitted when `value` tokens are moved from one account (`from`) to
-     * another (`to`).
-     *
-     * Note that `value` may be zero.
-     */
-    event Transfer(address indexed from, address indexed to, uint256 value);
-
-    /**
-     * @dev Emitted when the allowance of a `spender` for an `owner` is set by
-     * a call to {approve}. `value` is the new allowance.
-     */
-    event Approval(address indexed owner, address indexed spender, uint256 value);
-}

apps/remix-ide/contracts/.deps/github/OpenZeppelin/openzeppelin-contracts/contracts/token/ERC20/extensions/IERC20Metadata.sol

@@ -1,27 +0,0 @@
-// SPDX-License-Identifier: MIT
-
-pragma solidity ^0.8.0;
-
-import "../IERC20.sol";
-
-/**
- * @dev Interface for the optional metadata functions from the ERC20 standard.
- *
- * _Available since v4.1._
- */
-interface IERC20Metadata is IERC20 {
-    /**
-     * @dev Returns the name of the token.
-     */
-    function name() external view returns (string memory);
-
-    /**
-     * @dev Returns the symbol of the token.
-     */
-    function symbol() external view returns (string memory);
-
-    /**
-     * @dev Returns the decimals places of the token.
-     */
-    function decimals() external view returns (uint8);
-}

apps/remix-ide/contracts/.deps/github/OpenZeppelin/openzeppelin-contracts/contracts/utils/Context.sol

@@ -1,23 +0,0 @@
-// SPDX-License-Identifier: MIT
-
-pragma solidity ^0.8.0;
-
-/**
- * @dev Provides information about the current execution context, including the
- * sender of the transaction and its data. While these are generally available
- * via msg.sender and msg.data, they should not be accessed in such a direct
- * manner, since when dealing with meta-transactions the account sending and
- * paying for execution may not be the actual sender (as far as an application
- * is concerned).
- *
- * This contract is only required for intermediate, library-like contracts.
- */
-abstract contract Context {
-    function _msgSender() internal view virtual returns (address) {
-        return msg.sender;
-    }
-
-    function _msgData() internal view virtual returns (bytes calldata) {
-        return msg.data;
-    }
-}

apps/remix-ide/contracts/folder1/contract_chrome_toremove.sol

@@ -0,0 +1 @@
+contract test2 { function get () returns (uint) { return 11; }}

apps/remix-ide/src/app/components/plugin-manager-component.js

@@ -38,10 +38,7 @@ class PluginManagerComponent extends ViewPlugin {
     this.inactivePlugins = []
     this.activeProfiles = this.appManager.actives
     this._paq = _paq
-  }
+    this.listenOnEvent()
-
-  triggerEngineEventListener () {
-    this.engine.event.on('onRegistration', () => this.renderComponent())
   }
 
   /**
@@ -61,10 +58,6 @@ class PluginManagerComponent extends ViewPlugin {
    */
   activateP (name) {
     this.appManager.activatePlugin(name)
-    this.appManager.event.on('activate', () => {
-      this.getAndFilterPlugins()
-      this.triggerEngineEventListener()
-    })
     _paq.push(['trackEvent', 'manager', 'activate', name])
   }
 
@@ -91,10 +84,6 @@ class PluginManagerComponent extends ViewPlugin {
    */
   deactivateP (name) {
     this.call('manager', 'deactivatePlugin', name)
-    this.appManager.event.on('deactivate', () => {
-      this.getAndFilterPlugins()
-      this.triggerEngineEventListener()
-    })
     _paq.push(['trackEvent', 'manager', 'deactivate', name])
   }
 
@@ -107,7 +96,7 @@ class PluginManagerComponent extends ViewPlugin {
       <RemixUiPluginManager
         pluginComponent={this}
       />,
-      document.getElementById('pluginManager'))
+      this.htmlElement)
   }
 
   render () {
@@ -146,6 +135,16 @@ class PluginManagerComponent extends ViewPlugin {
     this.inactivePlugins = deactivatedPlugins
     this.renderComponent()
   }
+
+  listenOnEvent () {
+    this.engine.event.on('onRegistration', () => this.renderComponent())
+    this.appManager.event.on('activate', () => {
+      this.getAndFilterPlugins()
+    })
+    this.appManager.event.on('deactivate', () => {
+      this.getAndFilterPlugins()
+    })
+  }
 }
 
 module.exports = PluginManagerComponent

libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCard.tsx

@@ -10,50 +10,47 @@ interface PluginCardProps {
   profile: any
   buttonText: string
   deactivatePlugin: (pluginName: string) => void
-  setActivePlugins: Dispatch<React.SetStateAction<Profile<any>[]>>
+  // setActivePlugins: Dispatch<React.SetStateAction<Profile<any>[]>>
-  activePlugins: Profile[]
+  // activePlugins: Profile[]
 }
 
 // eslint-disable-next-line no-empty-pattern
 function ActivePluginCard ({
   profile,
   buttonText,
-  deactivatePlugin,
+  deactivatePlugin
-  activePlugins,
+  // activePlugins,
-  setActivePlugins
+  // setActivePlugins
 }: PluginCardProps) {
-  const [displayName] = useState<string>((profile.displayName) ? profile.displayName : profile.name)
-  const [docLink] = useState<JSX.Element>((profile.documentation) ? (
-    <a href={profile.documentation} className="px-1" title="link to documentation" target="_blank" rel="noreferrer">
-      <i aria-hidden="true" className="fas fa-book"/>
-    </a>
-  ) : null)
-  const [versionWarning] = useState<JSX.Element>((profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) ? (
-    <small title="Version Alpha" className="remixui_versionWarning plugin-version">alpha</small>
-  ) : (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) ? (
-    <small title="Version Beta" className="remixui_versionWarning plugin-version">beta</small>
-  ) : null)
-
   return (
     <div className="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
-      <article className="list-group-item py-1 mb-1 plugins-list-group-item" title={displayName}>
+      <article className="list-group-item py-1 mb-1 plugins-list-group-item" title={profile.displayName || profile.name}>
         <div className="remixui_row justify-content-between align-items-center mb-2">
           <h6 className="remixui_displayName plugin-name">
             <div>
-              {displayName}
+              { profile.displayName || profile.name }
-              {docLink}
+              { profile.documentation &&
-              {versionWarning}
+                <a href={profile.documentation} className="px-1" title="link to documentation" target="_blank" rel="noreferrer">
+                  <i aria-hidden="true" className="fas fa-book"/>
+                </a>
+              }
+              { profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)
+                ? <small title="Version Alpha" className="remixui_versionWarning plugin-version">alpha</small>
+                : profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)
+                  ? <small title="Version Beta" className="remixui_versionWarning plugin-version">beta</small>
+                  : null
+              }
             </div>
             {<button
               onClick={() => {
                 deactivatePlugin(profile.name)
-                const actives: Profile[] = JSON.parse(localStorage.getItem('newActivePlugins'))
+                // const actives: Profile[] = JSON.parse(localStorage.getItem('newActivePlugins'))
-                if (actives && actives.length) {
+                // if (actives && actives.length) {
-                  const newList = _.remove(actives, active => active.name !== profile.name)
+                //   const newList = _.remove(actives, active => active.name !== profile.name)
-                  // console.log('removed using lodash and this is the result', newList)
+                //   // console.log('removed using lodash and this is the result', newList)
-                  localStorage.setItem('newActivePlugins', JSON.stringify(newList))
+                //   localStorage.setItem('newActivePlugins', JSON.stringify(newList))
-                  setActivePlugins(newList)
+                //   setActivePlugins(newList)
-                }
+                // }
               } }
               className="btn btn-secondary btn-sm"
               data-id={`pluginManagerComponentDeactivateButton${profile.name}`}

libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCardContainer.tsx

@@ -10,32 +10,34 @@ interface ActivePluginCardContainerProps {
   activeProfiles: Profile[]
 }
 function ActivePluginCardContainer ({ pluginComponent }: ActivePluginCardContainerProps) {
-  const [activeProfiles, setActiveProfiles] = useState<Profile[]>()
+  // const [activeProfiles, setActiveProfiles] = useState<Profile[]>()
   const deactivatePlugin = (pluginName: string) => {
     pluginComponent.deactivateP(pluginName)
   }
 
-  useEffect(() => {
+  // useEffect(() => {
-    const savedActiveProfiles = JSON.parse(localStorage.getItem('newActivePlugins'))
+  //   const savedActiveProfiles = JSON.parse(localStorage.getItem('newActivePlugins'))
-    if (pluginComponent.activePlugins && pluginComponent.activePlugins.length > 0) {
+  //   if (pluginComponent.activePlugins && pluginComponent.activePlugins.length > 0) {
-      setActiveProfiles(pluginComponent.activePlugins)
+  //     setActiveProfiles(pluginComponent.activePlugins)
-    } else if (savedActiveProfiles && savedActiveProfiles.length > 0 && pluginComponent.activePlugins.length === 0) {
+  //   } else if (savedActiveProfiles && savedActiveProfiles.length > 0 && pluginComponent.activePlugins.length === 0) {
-      setActiveProfiles(savedActiveProfiles)
+  //     setActiveProfiles(savedActiveProfiles)
-    }
+  //   }
-  }, [pluginComponent, pluginComponent.activePlugins])
+  // }, [pluginComponent, pluginComponent.activePlugins])
   return (
     <Fragment>
-      {(activeProfiles && activeProfiles.length) ? <ModuleHeading headingLabel="Active Modules" count={activeProfiles.length} /> : null}
+      {(pluginComponent.activePlugins && pluginComponent.activePlugins.length) ? <ModuleHeading headingLabel="Active Modules" count={pluginComponent.activePlugins.length} /> : null}
-      {activeProfiles && activeProfiles.map((profile, idx) => (
+      {pluginComponent.activePlugins && pluginComponent.activePlugins.map((profile, idx) => {
-        <ActivePluginCard
+        return (
-          buttonText="Deactivate"
+          <ActivePluginCard
-          profile={profile}
+            buttonText="Deactivate"
-          deactivatePlugin={deactivatePlugin}
+            profile={profile}
-          key={idx}
+            deactivatePlugin={deactivatePlugin}
-          activePlugins={activeProfiles}
+            key={idx}
-          setActivePlugins={setActiveProfiles}
+            // activePlugins={pluginComponent.activePlugins}
-        />
+            // setActivePlugins={setActiveProfiles}
-      ))
+          />
+        )
+      })
       }
     </Fragment>
   )

libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx

@@ -7,7 +7,7 @@ interface PluginCardProps {
     icon?: string
   }
   buttonText: string
-  activatePlugin: (plugin: Profile) => void
+  activatePlugin: (plugin: string) => void
   // inactivePlugins: Profile[]
   // setInactivePlugins: Dispatch<React.SetStateAction<Profile<any>[]>>
   // setActivePlugins: Dispatch<React.SetStateAction<Profile<any>[]>>
@@ -21,38 +21,34 @@ function InactivePluginCard ({
   buttonText,
   activatePlugin
 }: PluginCardProps) {
-  const [displayName] = useState<string>((profile.displayName) ? profile.displayName : profile.name)
-  const [docLink] = useState<JSX.Element>((profile.documentation) ? (
-    <a href={profile.documentation} className="px-1" title="link to documentation" target="_blank" rel="noreferrer">
-      <i aria-hidden="true" className="fas fa-book"/>
-    </a>
-  ) : null)
-
-  const [versionWarning] = useState<JSX.Element>((profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) ? (
-    <small title="Version Alpha" className="remixui_versionWarning plugin-version">alpha</small>
-  ) : (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) ? (
-    <small title="Version Beta" className="remixui_versionWarning plugin-version">beta</small>
-  ) : null)
-
   return (
     <div className="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
-      <article className="list-group-item py-1 mb-1 plugins-list-group-item" title={displayName}>
+      <article className="list-group-item py-1 mb-1 plugins-list-group-item" title={profile.displayName || profile.name}>
         <div className="remixui_row justify-content-between align-items-center mb-2">
           <h6 className="remixui_displayName plugin-name">
             <div>
-              {displayName}
+              { profile.displayName || profile.name }
-              {docLink}
+              { profile.documentation &&
-              {versionWarning}
+                <a href={profile.documentation} className="px-1" title="link to documentation" target="_blank" rel="noreferrer">
+                  <i aria-hidden="true" className="fas fa-book"/>
+                </a>
+              }
+              { profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)
+                ? <small title="Version Alpha" className="remixui_versionWarning plugin-version">alpha</small>
+                : profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)
+                  ? <small title="Version Beta" className="remixui_versionWarning plugin-version">beta</small>
+                  : null
+              }
             </div>
             {
               <button
                 onClick={() => {
-                  activatePlugin(profile)
+                  activatePlugin(profile.name)
-                  const newActives: Profile[] = JSON.parse(localStorage.getItem('newActivePlugins'))
+                  // const newActives: Profile[] = JSON.parse(localStorage.getItem('newActivePlugins'))
-                  if (!newActives.includes(profile)) {
+                  // if (!newActives.includes(profile)) {
-                    newActives.push(profile)
+                  //   newActives.push(profile)
-                    localStorage.setItem('newActivePlugins', JSON.stringify(newActives))
+                  //   localStorage.setItem('newActivePlugins', JSON.stringify(newActives))
-                  }
+                  // }
                 }}
                 className="btn btn-success btn-sm"
                 data-id={`pluginManagerComponentActivateButton${profile.name}`}

libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx

@@ -21,39 +21,42 @@ interface LocalPluginInterface {
   iframe: {}
 }
 function InactivePluginCardContainer ({ pluginComponent, setInactiveProfiles, inactiveProfiles }: InactivePluginCardContainerProps) {
-  const activatePlugin = (profile: Profile) => {
+  const activatePlugin = (pluginName: string) => {
-    pluginComponent.activateP(profile.name)
+    pluginComponent.activateP(pluginName)
   }
 
-  useEffect(() => {
+  // useEffect(() => {
-    const savedLocalPlugins: LocalPluginInterface = JSON.parse(localStorage.getItem('plugins/local'))
+  //   const savedLocalPlugins: LocalPluginInterface = JSON.parse(localStorage.getItem('plugins/local'))
-    const savedActiveProfiles: Profile[] = JSON.parse(localStorage.getItem('newActivePlugins'))
+  //   const savedActiveProfiles: Profile[] = JSON.parse(localStorage.getItem('newActivePlugins'))
-    if (pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.length) {
+  //   if (pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.length) {
-      let temp: Profile[] = []
+  //     let temp: Profile[] = []
-      if (Object.keys(savedLocalPlugins).length) {
+  //     if (Object.keys(savedLocalPlugins).length) {
-        temp = [...pluginComponent.inactivePlugins, savedLocalPlugins.profile as Profile]
+  //       temp = [...pluginComponent.inactivePlugins, savedLocalPlugins.profile as Profile]
-      } else {
+  //     } else {
-        temp = [...pluginComponent.inactivePlugins]
+  //       temp = [...pluginComponent.inactivePlugins]
-      }
+  //     }
-      const filtered = temp.filter(t => {
+  //     const filtered = temp.filter(t => {
-        return !savedActiveProfiles.find(active => {
+  //       return !savedActiveProfiles.find(active => {
-          return active.name === t.name
+  //         return active.name === t.name
-        })
+  //       })
-      })
+  //     })
-      setInactiveProfiles(filtered)
+  //     setInactiveProfiles(filtered)
-    }
+  //   }
-  }, [pluginComponent, pluginComponent.inactivePlugins, setInactiveProfiles])
+  // }, [pluginComponent, pluginComponent.inactivePlugins, setInactiveProfiles])
   return (
     <Fragment>
-      {(inactiveProfiles && inactiveProfiles.length) ? <ModuleHeading headingLabel="Inactive Modules" count={inactiveProfiles.length} /> : null}
+      {(pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.length) ? <ModuleHeading headingLabel="Inactive Modules" count={pluginComponent.inactivePlugins.length} /> : null}
-      {inactiveProfiles && inactiveProfiles.map((profile, idx) => (
+      {pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.map((profile, idx) => {
-        <InactivePluginCard
+        // console.log('profile: ', profile)
-          buttonText="Activate"
+        return (
-          profile={profile}
+          <InactivePluginCard
-          key={idx}
+            buttonText="Activate"
-          activatePlugin={activatePlugin}
+            profile={profile}
-        />
+            key={idx}
-      ))
+            activatePlugin={activatePlugin}
+          />
+        )
+      })
       }
     </Fragment>
   )

libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-debugger */
-import React, { Dispatch, useReducer } from 'react'
+import React, { Dispatch, useReducer, useState } from 'react'
 import { ModalDialog } from '@remix-ui/modal-dialog'
 import { Toaster } from '@remix-ui/toaster'
 import { IframePlugin, WebsocketPlugin } from '@remixproject/engine-web'
@@ -14,45 +14,49 @@ interface LocalPluginFormProps {
   pluginManager: PluginManagerComponent
 }
 
-const handleModalOkClick = async (pluginManager: PluginManagerComponent, plugin: FormStateProps,
+const defaultProfile = {
-  toastDispatcher: Dispatch<localPluginReducerActionType>) => {
+  methods: [],
-  try {
+  location: 'sidePanel',
-    const profile = JSON.parse(localStorage.getItem('plugins/local'))
+  type: 'iframe'
-    if (profile && profile.profile && Object.keys(profile).length > 0) {
+}
-      if (pluginManager.appManager.getIds().includes(profile.profile.name)) {
+
+function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginManager }: LocalPluginFormProps) {
+  const [errorMsg, dispatchToastMsg] = useReducer(localPluginToastReducer, '')
+  const [defaultPlugin] = useState<FormStateProps>(JSON.parse(localStorage.getItem('plugins/local')) || defaultProfile)
+
+  const handleModalOkClick = async () => {
+    try {
+      if (!plugin.name) throw new Error('Plugin should have a name')
+      if (pluginManager.appManager.getIds().includes(plugin.name)) {
         throw new Error('This name has already been used')
       }
-    }
+      if (!plugin.location) throw new Error('Plugin should have a location')
-    if (!plugin.location) throw new Error('Plugin should have a location')
+      if (!plugin.url) throw new Error('Plugin should have an URL')
-    if (!plugin.name) throw new Error('Plugin should have a name')
+      plugin.methods = typeof plugin.methods === 'string' ? plugin.methods.split(',').filter(val => val) : []
-    if (!plugin.url) throw new Error('Plugin should have an URL')
+      const localPlugin = plugin.type === 'iframe' ? new IframePlugin(plugin) : new WebsocketPlugin(plugin)
-    plugin.methods = plugin.methods.split(',').filter(val => val)
-    const localPlugin = plugin.type === 'iframe' ? new IframePlugin(plugin) : new WebsocketPlugin(plugin)
 
-    localPlugin.profile.hash = `local-${plugin.name}`
+      localPlugin.profile.hash = `local-${plugin.name}`
-    const targetPlugin = {
+      const targetPlugin = {
-      name: localPlugin.profile.name,
+        name: localPlugin.profile.name,
-      displayName: localPlugin.profile.displayName,
+        displayName: localPlugin.profile.displayName,
-      description: (localPlugin.profile.description !== undefined ? localPlugin.profile.description : ''),
+        description: (localPlugin.profile.description !== undefined ? localPlugin.profile.description : ''),
-      documentation: localPlugin.profile.url,
+        documentation: localPlugin.profile.url,
-      events: (localPlugin.profile.events !== undefined ? localPlugin.profile.events : []),
+        events: (localPlugin.profile.events !== undefined ? localPlugin.profile.events : []),
-      hash: localPlugin.profile.hash,
+        hash: localPlugin.profile.hash,
-      kind: (localPlugin.profile.kind !== undefined ? localPlugin.profile.kind : ''),
+        kind: (localPlugin.profile.kind !== undefined ? localPlugin.profile.kind : ''),
-      methods: localPlugin.profile.methods,
+        methods: localPlugin.profile.methods,
-      type: plugin.type,
+        type: plugin.type,
-      location: plugin.location,
+        location: plugin.location,
-      icon: 'assets/img/localPlugin.webp'
+        icon: 'assets/img/localPlugin.webp'
+      }
+      localPlugin.profile = { ...localPlugin.profile, ...targetPlugin }
+      pluginManager.activateAndRegisterLocalPlugin(localPlugin)
+    } catch (error) {
+      const action: localPluginReducerActionType = { type: 'show', payload: `${error.message}` }
+      dispatchToastMsg(action)
+      console.log(error)
     }
-    localPlugin.profile = { ...localPlugin.profile, ...targetPlugin }
-    pluginManager.activateAndRegisterLocalPlugin(localPlugin)
-  } catch (error) {
-    const action: localPluginReducerActionType = { type: 'show', payload: `${error.message}` }
-    toastDispatcher(action)
-    console.log(error)
   }
-}
-function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginManager }: LocalPluginFormProps) {
-  const [errorMsg, dispatchToastMsg] = useReducer(localPluginToastReducer, '')
 
   return (
     <><ModalDialog
@@ -61,7 +65,7 @@ function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginMa
       hide={visible}
       title="Local Plugin"
       okLabel="OK"
-      okFn={() => handleModalOkClick(pluginManager, plugin, dispatchToastMsg) }
+      okFn={ handleModalOkClick }
       cancelLabel="Cancel"
       cancelFn={closeModal}
     >
@@ -71,7 +75,7 @@ function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginMa
           <input
             className="form-control"
             onChange={e => changeHandler('name', e.target.value)}
-            value={plugin.name}
+            value={ plugin.name || defaultPlugin.name }
             id="plugin-name"
             data-id="localPluginName"
             placeholder="Should be camelCase" />
@@ -81,7 +85,7 @@ function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginMa
           <input
             className="form-control"
             onChange={e => changeHandler('displayName', e.target.value)}
-            value={plugin.displayName}
+            value={ plugin.displayName || defaultPlugin.displayName }
             id="plugin-displayname"
             data-id="localPluginDisplayName"
             placeholder="Name in the header" />
@@ -91,7 +95,7 @@ function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginMa
           <input
             className="form-control"
             onChange={e => changeHandler('methods', e.target.value)}
-            value={plugin.methods}
+            value={plugin.methods || defaultPlugin.methods}
             id="plugin-methods"
             data-id="localPluginMethods"
             placeholder="Name in the header" />
@@ -102,7 +106,7 @@ function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginMa
           <input
             className="form-control"
             onChange={e => changeHandler('url', e.target.value)}
-            value={plugin.url}
+            value={ plugin.url || defaultPlugin.url }
             id="plugin-url"
             data-id="localPluginUrl"
             placeholder="ex: https://localhost:8000" />

libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx

@@ -9,37 +9,36 @@ import './remix-ui-plugin-manager.css'
 export const RemixUiPluginManager = ({ pluginComponent }: RemixUiPluginManagerProps) => {
   const [activeProfiles, setActiveProfiles] = useState<Profile[]>(pluginComponent.activePlugins)
   const [inactiveProfiles, setinactiveProfiles] = useState<Profile[]>(pluginComponent.inactivePlugins)
-  const [activated] = useState<string[]>(pluginComponent.activeProfiles)
+  // const [activated] = useState<string[]>(pluginComponent.activeProfiles)
 
-  if (JSON.parse(localStorage.getItem('newActivePlugins')) === null) {
+  // if (JSON.parse(localStorage.getItem('newActivePlugins')) === null) {
-    localStorage.setItem('newActivePlugins', '[]')
+  //   localStorage.setItem('newActivePlugins', '[]')
-  }
+  // }
-  if (JSON.parse(localStorage.getItem('plugins/local')) === null) {
+  // if (JSON.parse(localStorage.getItem('plugins/local')) === null) {
-    localStorage.setItem('plugins/local', '{}')
+  //   localStorage.setItem('plugins/local', '{}')
-  }
+  // }
-  if (JSON.parse(localStorage.getItem('activatedPluginNames'))) {
+  // if (JSON.parse(localStorage.getItem('activatedPluginNames'))) {
-    localStorage.setItem('activatedPluginNames', '[]')
+  //   localStorage.setItem('activatedPluginNames', '[]')
-  }
+  // }
-  console.log('activated profile names :', activated)
 
-  useEffect(() => {
+  // useEffect(() => {
-    console.log('first time into use effect the activated state is', activated)
+  //   console.log('first time into use effect the activated state is', activated)
-    const checkSolidity = async () => {
+  //   const checkSolidity = async () => {
-      const savedActives: Profile[] = JSON.parse(localStorage.getItem('newActivePlugins'))
+  //     const savedActives: Profile[] = JSON.parse(localStorage.getItem('newActivePlugins'))
-      if (activated.includes('solidity') && activated.includes('solidity-logic')) {
+  //     if (activated.includes('solidity') && activated.includes('solidity-logic')) {
-        if (savedActives && savedActives.length >= 0) {
+  //       if (savedActives && savedActives.length >= 0) {
-          if (!savedActives.find(active => active.name === 'solidity') && !savedActives.find(active => active.name === 'solidity-logic')) {
+  //         if (!savedActives.find(active => active.name === 'solidity') && !savedActives.find(active => active.name === 'solidity-logic')) {
-            const solidity = await pluginComponent.appManager.getProfile('solidity')
+  //           const solidity = await pluginComponent.appManager.getProfile('solidity')
-            const logic = await pluginComponent.appManager.getProfile('solidity-logic')
+  //           const logic = await pluginComponent.appManager.getProfile('solidity-logic')
-            savedActives.push(solidity, logic)
+  //           savedActives.push(solidity, logic)
-          }
+  //         }
-        }
+  //       }
-      }
+  //     }
-      console.log('Use effect called, activated state is', activated)
+  //     console.log('Use effect called, activated state is', activated)
-    }
+  //   }
-    checkSolidity()
+  //   checkSolidity()
-    console.log('activated state right at useEffect exit', activated)
+  //   console.log('activated state right at useEffect exit', activated)
-  }, [activated, pluginComponent.appManager])
+  // }, [activated, pluginComponent.appManager])
   return (
     <RootView pluginComponent={pluginComponent}>
       <section data-id="pluginManagerComponentPluginManagerSection">

package.json

@@ -72,7 +72,7 @@
     "nightwatch_local_gist": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/gist.spec.js --env=chrome",
     "nightwatch_local_workspace": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/workspace.test.js --env=chrome",
     "nightwatch_local_defaultLayout": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/defaultLayout.test.js --env=chrome",
-    "nightwatch_local_pluginManager": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/pluginManager.spec.js --env=firefox",
+    "nightwatch_local_pluginManager": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/pluginManager.spec.js --env=chrome",
     "nightwatch_local_publishContract": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/publishContract.test.js --env=chrome",
     "nightwatch_local_generalSettings": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/generalSettings.test.js --env=chrome",
     "nightwatch_local_fileExplorer": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/fileExplorer.test.js --env=chrome",