add sub menus

apps/remix-ide/src/app/tabs/locales/en/filePanel.json

@@ -27,6 +27,10 @@
   "filePanel.solghaction": "Solidity Test Workflow",
   "filePanel.workspace.tssoltestghaction": "Adds a preset yml file to run mocha and chai tests for solidity on github actions CI",
   "filePanel.tssoltestghaction": "Mocha Chai Test Workflow",
+  "filePanel.workspace.addscriptetherscan": "Adds a scripts which can be used to interact with the etherscan API.",
+  "filePanel.addscriptetherscan": "Add Etherscan script",
+  "filePanel.workspace.addscriptdeployer": "Adds a scripts which can be used to deploy contracts.",
+  "filePanel.addscriptdeployer": "Add Contract deployer script",
   "filePanel.workspace.slitherghaction": "Adds a preset yml file to run slither analysis on github actions CI",
   "filePanel.slitherghaction": "Slither Workflow",
   "filePanel.workspace.helperscripts": "Adds convenient scripts to the 'scripts' directory",

libs/remix-ui/helper/src/index.ts

@@ -4,3 +4,4 @@ export * from './lib/helper-components'
 export * from './lib/components/PluginViewWrapper'
 export * from './lib/components/custom-dropdown'
 export * from './lib/components/custom-tooltip'
+export * from './lib/components/dropdown-submenu'

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

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import {DropdownProps} from 'react-bootstrap/Dropdown';
+import {useRef} from "react";
+
+interface Props extends DropdownProps {
+  id?: string;
+  className?: string;
+  href?: string;
+  title: string
+}
+
+export const DropdownSubmenu: React.FC<Props> = (props:Props)  => {
+  let refSubMenuContent = useRef(null as HTMLDivElement | null);
+
+    let className = 'dropdown-submenu-container';
+    className = props.className
+      ? className + ' ' + props.className
+      : className;
+
+  const onClick = (event: React.SyntheticEvent<any>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (refSubMenuContent.current) {
+      let show = false;
+      if (refSubMenuContent.current.classList.contains('show')) {
+        hideChildren(refSubMenuContent.current);
+      } else {
+        show = true;
+        hideSiblings();
+      }
+      refSubMenuContent.current.classList.toggle('show');
+      if (typeof props.onToggle === 'function') {
+        props.onToggle(show, event, { source: 'select'});
+      }
+    }
+  };
+
+  const hideSiblings = () => {
+    if (refSubMenuContent.current) {
+      const parents = getParents(
+          refSubMenuContent.current,
+          '.dropdown-menu.show'
+      );
+      if (parents.length > 1) {
+        hideChildren(parents[1]);
+      }
+    }
+  };
+
+  const hideChildren = (parent: any) => {
+    const children = parent.querySelectorAll('.dropdown-menu.show') as any;
+    for (const child of children) {
+      child.classList.remove('show');
+    }
+  }
+
+  const getParents = (elem: any, selector: string) => {
+    const nodes = [];
+    let element = elem;
+    nodes.push(element);
+    while (element.parentNode) {
+      if (
+          typeof element.parentNode.matches === 'function' &&
+          element.parentNode.matches(selector)
+      ) {
+        nodes.push(element.parentNode);
+      }
+      element = element.parentNode;
+    }
+    return nodes;
+  }
+
+    return (
+      <div className={className} id={props.id}>
+        <a
+          href={props.href}
+          className="dropdown-item dropdown-submenu dropdown-toggle"
+          onClick={onClick}
+        >
+          {props.title}
+        </a>
+        <div
+          className="dropdown-menu"
+          ref={refSubMenuContent}
+        >
+          {props.children}
+        </div>
+      </div>
+    );
+
+}

libs/remix-ui/workspace/src/lib/actions/workspace.ts

@@ -13,8 +13,7 @@ import { ROOT_PATH, slitherYml, solTestYml, tsSolTestYml } from '../utils/consta
 import { IndexedDBStorage } from '../../../../../../apps/remix-ide/src/app/files/filesystems/indexedDB'
 import { getUncommittedFiles } from '../utils/gitStatusFilter'
 import { AppModal, ModalTypes } from '@remix-ui/app'
-import { contractDeployerScripts } from '../scripts/contract-deployer'
+import { scripts } from '../scripts'
-import { etherscanScripts } from '../scripts/etherscan'
 
 declare global {
   interface Window { remixFileSystemCallback: IndexedDBStorage; }
@@ -679,9 +678,9 @@ export const createSlitherGithubAction = async () => {
   plugin.call('fileManager', 'open', path)
 }
 
-export const createHelperScripts = async () => {
+export const createHelperScripts = async (script: string) => {
-  await contractDeployerScripts(plugin)
+  if (!scripts[script]) return
-  await etherscanScripts(plugin)
+  await scripts[script](plugin)
   plugin.call('notification', 'toast', 'scripts added in the "scripts" folder')
 }
 

libs/remix-ui/workspace/src/lib/components/workspace-hamburger-item.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { CustomTooltip } from '@remix-ui/helper'
+import { CustomTooltip, CustomMenu, CustomIconsToggle } from '@remix-ui/helper'
-import { Dropdown } from 'react-bootstrap'
+import { Dropdown, NavDropdown} from 'react-bootstrap'
 import { FormattedMessage } from 'react-intl'
 
 const _paq = window._paq = window._paq || []
@@ -49,3 +49,65 @@ export function HamburgerMenuItem (props: HamburgerMenuItemProps) {
         </>
       )
     }
+
+  // keeping the following for a later use:
+  export function NavHamburgerMenuItem (props: HamburgerMenuItemProps) {
+    const { hideOption } = props
+      const uid = 'workspace' + props.kind
+        return (
+          <>
+            <NavDropdown.Item>
+              <CustomTooltip
+                placement="right"
+                tooltipId={uid + "Tooltip"}
+                tooltipClasses="text-nowrap"
+                tooltipText={<FormattedMessage id={'filePanel.workspace.' + props.kind} />}
+              >
+                <div
+                  data-id={uid}
+                  key={uid + '-fe-ws'}
+                  onClick={() => {
+                    props.actionOnClick()
+                    _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', uid])
+                  }}
+                >
+                  <span
+                    hidden={hideOption}
+                    id={uid}
+                    data-id={uid}
+                    className={props.fa + ' pl-2'}
+                    style={{width: '1.4rem'}}
+                  >
+                  </span>
+                  <span className="px-2">
+                    <FormattedMessage id={'filePanel.' + props.kind } />
+                  </span>
+                </div>
+              </CustomTooltip>
+            </NavDropdown.Item>
+          </>
+        )
+    }
+
+  export interface HamburgerSubMenuItemProps {
+    id: string
+    title: string
+    subMenus: Array<HamburgerMenuItemProps>
+  }
+
+  export function HamburgerSubMenuItem (props: HamburgerSubMenuItemProps) {
+      return (
+        <>
+          <NavDropdown
+            title={props.title}
+            as={CustomMenu}
+            key={props.id}
+            id={props.id}
+            drop='right'
+
+          >
+            {props.subMenus.map(item => <NavHamburgerMenuItem kind={item.kind} fa={item.fa} hideOption={item.hideOption} actionOnClick={item.actionOnClick} />)}
+          </NavDropdown>
+        </>
+      )
+    }

libs/remix-ui/workspace/src/lib/components/workspace-hamburger.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Dropdown } from 'react-bootstrap'
-import { HamburgerMenuItem } from './workspace-hamburger-item'
+import { HamburgerMenuItem, HamburgerSubMenuItem } from './workspace-hamburger-item'
 
 export interface HamburgerMenuProps {
   createWorkspace: () => void,
@@ -15,7 +15,7 @@ export interface HamburgerMenuProps {
   addGithubAction: () => void,
   addTsSolTestGithubAction: () => void,
   addSlitherGithubAction: () => void,
-  addHelperScripts: () => void,
+  addHelperScripts: (script: string) => void,
   showIconsMenu: boolean,
   hideWorkspaceOptions: boolean,
   hideLocalhostOptions: boolean
@@ -72,10 +72,43 @@ export function HamburgerMenu (props: HamburgerMenuProps) {
           props.hideIconsMenu(!showIconsMenu)
         }}></HamburgerMenuItem>
         <Dropdown.Divider className="border mb-0 mt-0 remixui_menuhr" style={{ pointerEvents: 'none' }} />
-        <HamburgerMenuItem kind='helperscripts' fa='fak fa-ts-logo' hideOption={hideWorkspaceOptions} actionOnClick={() => {
+        <HamburgerMenuItem kind='addscriptetherscan' fa='fak fa-ts-logo' hideOption={hideWorkspaceOptions} actionOnClick={() => {
-          props.addHelperScripts()
+          props.addHelperScripts('etherscan')
+          props.hideIconsMenu(!showIconsMenu)
+        }}></HamburgerMenuItem>
+        <HamburgerMenuItem kind='addscriptdeployer' fa='fak fa-ts-logo' hideOption={hideWorkspaceOptions} actionOnClick={() => {
+          props.addHelperScripts('deployer')
           props.hideIconsMenu(!showIconsMenu)
         }}></HamburgerMenuItem>
       </>
     )
   }
+
+  // keep for later use
+  /*<HamburgerSubMenuItem
+          id="web3-script-menu"
+          title="Web3 Scripts"
+          subMenus={[
+            {
+              kind:'etherscan-script',
+              fa: 'fak fa-ts-logo',
+              hideOption: hideWorkspaceOptions,
+              actionOnClick: () => {
+                alert('etherscan')
+                props.addHelperScripts()
+                props.hideIconsMenu(!showIconsMenu)
+              }
+            },
+            {
+              kind:'contract-deployer-factory-script',
+              fa: 'fak fa-ts-logo',
+              hideOption: hideWorkspaceOptions,
+              actionOnClick: () => {
+                alert('deloyer')
+                props.addHelperScripts()
+                props.hideIconsMenu(!showIconsMenu)
+              }
+            }
+          ]}
+        ></HamburgerSubMenuItem>
+        */

libs/remix-ui/workspace/src/lib/contexts/index.ts

@@ -45,7 +45,7 @@ export const FileSystemContext = createContext<{
   dispatchCreateSolidityGithubAction: () => Promise<void>,
   dispatchCreateTsSolGithubAction: () => Promise<void>,
   dispatchCreateSlitherGithubAction: () => Promise<void>
-  dispatchCreateHelperScripts: () => Promise<void>
+  dispatchCreateHelperScripts: (script: string) => Promise<void>
 }>(null)
   
     

libs/remix-ui/workspace/src/lib/providers/FileSystemProvider.tsx

@@ -183,8 +183,8 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     await createSlitherGithubAction()
   }
 
-  const dispatchCreateHelperScripts = async () => {
+  const dispatchCreateHelperScripts = async (script: string) => {
-    await createHelperScripts()
+    await createHelperScripts(script)
   }
 
   useEffect(() => {

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

@@ -209,8 +209,8 @@ export function Workspace () {
     global.dispatchCreateSlitherGithubAction()
   }
 
-  const addHelperScripts = () => {
+  const addHelperScripts = (script: string) => {
-    global.dispatchCreateHelperScripts()
+    global.dispatchCreateHelperScripts(script)
   }
 
   const downloadWorkspaces = async () => {

libs/remix-ui/workspace/src/lib/scripts/contract-deployer/basic-contract-deploy.ts

@@ -0,0 +1,29 @@
+import { ethers } from 'ethers'
+
+/**
+ * Deploy the given contract
+ * @param {string} contractName name of the contract to deploy
+ * @param {Array<any>} args list of constructor' parameters
+ * @param {Number} accountIndex account index from the exposed account
+ * @return {Contract} deployed contract
+ */
+export const deploy = async (contractName: string, args: Array<any>, accountIndex?: number): Promise<ethers.Contract> => {    
+
+    console.log(`deploying ${contractName}`)
+    // Note that the script needs the ABI which is generated from the compilation artifact.
+    // Make sure contract is compiled and artifacts are generated
+    const artifactsPath = `browser/contracts/artifacts/${contractName}.json` // Change this for different path
+
+    const metadata = JSON.parse(await remix.call('fileManager', 'getFile', artifactsPath))
+    // 'web3Provider' is a remix global variable object
+    
+    const signer = (new ethers.providers.Web3Provider(web3Provider)).getSigner(accountIndex)
+
+    const factory = new ethers.ContractFactory(metadata.abi, metadata.data.bytecode.object, signer)
+
+    const contract = await factory.deploy(...args)   
+
+    // The contract is NOT deployed yet; we must wait until it is mined
+    await contract.deployed()
+    return contract
+}

libs/remix-ui/workspace/src/lib/scripts/contract-deployer/create2-factory-deploy.ts

@@ -5,7 +5,7 @@ export const CREATE2_DEPLOYER_ADDRESS =
   "0x13b0D85CcB8bf860b6b79AF3029fCA081AE9beF2";
 
 /**
- * Deploy the given contract
+ * Deploy the given contract using a factory
  * @param {string} address of the factory contract
  * @param {string} contractName name of the contract to deploy
  * @param {Array<any>} args list of constructor' parameters

libs/remix-ui/workspace/src/lib/scripts/contract-deployer/index.ts

@@ -3,4 +3,9 @@ export const contractDeployerScripts = async (plugin) => {
         'scripts/contract-deployer/create2-factory-deploy.ts' ,
         // @ts-ignore
         (await import('!!raw-loader!./create2-factory-deploy.ts')).default)
+    
+    await plugin.call('fileManager', 'writeFile', 
+        'scripts/contract-deployer/basic-contract-deploy.ts' ,
+        // @ts-ignore
+        (await import('!!raw-loader!./basic-contract-deploy.ts')).default)
 }

libs/remix-ui/workspace/src/lib/scripts/index.ts

@@ -0,0 +1,7 @@
+import { contractDeployerScripts } from '../scripts/contract-deployer'
+import { etherscanScripts } from '../scripts/etherscan'
+
+export const scripts = {
+    'etherscan': etherscanScripts,
+    'deployer': contractDeployerScripts
+}