Merge pull request #2927 from ethereum/ozfeatures

features for oz templates
2 years ago · a82c40d861
parent 5aa2974175 ba62741ae3
commit a82c40d861
5 changed files with 118 additions and 16 deletions
--- a/apps/remix-ide-e2e/src/tests/workspace.test.ts
+++ b/apps/remix-ide-e2e/src/tests/workspace.test.ts
@ -66,7 +66,7 @@ module.exports = {
      })
      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]')
      .click('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]')
-      .pause(2000)
+      .pause(100)
      .getEditorValue((content) => {
        browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array<any>, from?: string, gas?: number): Promise<Options> => {`) !== -1,
          'Incorrect content')
@ -129,28 +129,28 @@ module.exports = {
      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/deploy_with_web3.ts"]')
      // check js and ts files are not transformed
      .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_web3.ts"]')
-      .pause(5000)
+      .pause(100)
      .getEditorValue((content) => {        
        browser.assert.ok(content.indexOf(`import { deploy } from './web3-lib'`) !== -1,
          'Incorrect content')
      })
      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]')
      .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]')
-      .pause(4000)
+      .pause(100)
      .getEditorValue((content) => {        
        browser.assert.ok(content.indexOf(`import { deploy } from './ethers-lib'`) !== -1,
          'Incorrect content')
      })
      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]')
      .click('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]')
-      .pause(4000)
+      .pause(100)
      .getEditorValue((content) => {        
        browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array<any>, from?: string, gas?: number): Promise<Options> => {`) !== -1,
          'Incorrect content')
      })
      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]')
      .click('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]')
-      .pause(4000)
+      .pause(100)
      .getEditorValue((content) => {        
        browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array<any>, accountIndex?: number): Promise<ethers.Contract> => {`) !== -1,
          'Incorrect content')
@ -177,28 +177,28 @@ module.exports = {
      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/deploy_with_web3.ts"]')
      // check js and ts files are not transformed
      .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_web3.ts"]')
-      .pause(4000)
+      .pause(100)
      .getEditorValue((content) => {        
        browser.assert.ok(content.indexOf(`import { deploy } from './web3-lib'`) !== -1,
          'Incorrect content')
      })
      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]')
      .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]')
-      .pause(4000)
+      .pause(100)
      .getEditorValue((content) => {        
        browser.assert.ok(content.indexOf(`import { deploy } from './ethers-lib'`) !== -1,
          'Incorrect content')
      })
      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]')
      .click('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]')
-      .pause(4000)
+      .pause(100)
      .getEditorValue((content) => {        
        browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array<any>, from?: string, gas?: number): Promise<Options> => {`) !== -1,
          'Incorrect content')
      })
      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]')
      .click('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]')
-      .pause(4000)
+      .pause(100)
      .getEditorValue((content) => {        
        browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array<any>, accountIndex?: number): Promise<ethers.Contract> => {`) !== -1,
          'Incorrect content')
@ -225,28 +225,28 @@ module.exports = {
      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/deploy_with_web3.ts"]')
      // check js and ts files are not transformed
      .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_web3.ts"]')
-      .pause(4000)
+      .pause(1000)
      .getEditorValue((content) => {        
        browser.assert.ok(content.indexOf(`import { deploy } from './web3-lib'`) !== -1,
          'Incorrect content')
      })
      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]')
      .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]')
-      .pause(1000)
+      .pause(100)
      .getEditorValue((content) => {        
        browser.assert.ok(content.indexOf(`import { deploy } from './ethers-lib'`) !== -1,
          'Incorrect content')
      })
      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]')
      .click('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]')
-      .pause(1000)
+      .pause(100)
      .getEditorValue((content) => {        
        browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array<any>, from?: string, gas?: number): Promise<Options> => {`) !== -1,
          'Incorrect content')
      })
      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]')
      .click('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]')
-      .pause(1000)
+      .pause(100)
      .getEditorValue((content) => {        
        browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array<any>, accountIndex?: number): Promise<ethers.Contract> => {`) !== -1,
          'Incorrect content')
@ -255,6 +255,64 @@ module.exports = {
      .waitForElementVisible('*[data-id="treeViewLitreeViewItemtests/MyToken_test.sol"]')
  },

+  'Should create ERC1155 workspace with template customizations #group1': function (browser: NightwatchBrowser) {
+    browser
+      .click('*[data-id="workspaceCreate"]')
+      .waitForElementVisible('*[data-id="modalDialogCustomPromptTextCreate"]')
+      .waitForElementVisible('[data-id="fileSystemModalDialogModalFooter-react"] > button')
+      .click('select[id="wstemplate"]')
+      .click('select[id="wstemplate"] option[value=ozerc1155]')
+      .waitForElementPresent('*[data-id="ozCustomization"]')
+      .click('*[data-id="featureTypeMintable"]')
+      .click('*[data-id="featureTypeBurnable"]')
+      .click('*[data-id="featureTypePausable"]')
+      .click('*[data-id="upgradeTypeUups"]')
+      .waitForElementPresent('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
+      .execute(function () { (document.querySelector('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok') as HTMLElement).click() })
+      .pause(100)
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts"]')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts/MyToken.sol"]')
+      .click('*[data-id="treeViewLitreeViewItemcontracts/MyToken.sol"]')
+      .pause(1000)
+      .getEditorValue((content) => {        
+        browser.assert.ok(content.indexOf(`contract MyToken is Initializable, ERC1155Upgradeable, OwnableUpgradeable, PausableUpgradeable, ERC1155BurnableUpgradeable, UUPSUpgradeable {`) !== -1,
+          'Incorrect content')
+      })
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts"]')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/deploy_with_web3.ts"]')
+      // check js and ts files are not transformed
+      .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_web3.ts"]')
+      .pause(100)
+      .getEditorValue((content) => {        
+        browser.assert.ok(content.indexOf(`import { deploy } from './web3-lib'`) !== -1,
+          'Incorrect content')
+      })
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]')
+      .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]')
+      .pause(100)
+      .getEditorValue((content) => {        
+        browser.assert.ok(content.indexOf(`import { deploy } from './ethers-lib'`) !== -1,
+          'Incorrect content')
+      })
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]')
+      .click('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]')
+      .pause(100)
+      .getEditorValue((content) => {        
+        browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array<any>, from?: string, gas?: number): Promise<Options> => {`) !== -1,
+          'Incorrect content')
+        browser.assert.ok(content.indexOf(`gas: gas || 3600000`) !== -1,
+        'Incorrect gas cost')
+      })
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]')
+      .click('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]')
+      .pause(100)
+      .getEditorValue((content) => {        
+        browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array<any>, accountIndex?: number): Promise<ethers.Contract> => {`) !== -1,
+          'Incorrect content')
+      })
+      // No test file is added in upgradeable contract template
+  },
+
  // WORKSPACE TEMPLATES E2E END

  'Should create two workspace and switch to the first one #group1': function (browser: NightwatchBrowser) {
--- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
+++ b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
@ -16,6 +16,7 @@ export function Workspace () {
  const [selectedWorkspace, setSelectedWorkspace] = useState<{ name: string, isGitRepo: boolean}>(null)
  const [showDropdown, setShowDropdown] = useState<boolean>(false)
  const displayOzCustomRef = useRef<HTMLDivElement>()
+  const ozFeatures = useRef({mintable: false, burnable: false, pausable: false})
  const upgradeable = useRef()
  const global = useContext(FileSystemContext)
  const workspaceRenameInput = useRef()
@ -108,9 +109,10 @@ export function Workspace () {
    // @ts-ignore: Object is possibly 'null'.
    const workspaceTemplateName = workspaceCreateTemplateInput.current.value || 'remixDefault'
    const initGitRepo = initGitRepoRef.current.checked
-
+    const features = ozFeatures.current
    const opts = {
-      upgradeable: upgradeable.current
+      upgradeable: upgradeable.current,
+      features
    }

    try {
@ -150,6 +152,7 @@ export function Workspace () {
    if (workspaceCreateTemplateInput.current.value.startsWith('oz') && displayOzCustomRef && displayOzCustomRef.current) {
      displayOzCustomRef.current.style.display = 'block'
      upgradeable.current = undefined
+      ozFeatures.current = {mintable: false, burnable: false, pausable: false}
    } else displayOzCustomRef.current.style.display = 'none'
    
    // @ts-ignore
@ -177,6 +180,11 @@ export function Workspace () {
    workspaceCreateInput.current.value = `${workspaceCreateTemplateInput.current.value + '_upgradeable'}_${Date.now()}`
  }

+  const handleFeatures = (e) => {
+    // @ts-ignore
+    ozFeatures.current[e.target.value] = e.target.checked
+  }
+
  const createModalMessage = () => {
    return (
      <>
@ -196,8 +204,25 @@ export function Workspace () {
          </optgroup>
        </select>

-        <div id="ozcustomization" ref={displayOzCustomRef} style={{display: 'none'}} className="mb-2">
+        <div id="ozcustomization" data-id="ozCustomization" ref={displayOzCustomRef} style={{display: 'none'}} className="mb-2">
          <label className="form-check-label d-block mb-2" style={{fontWeight: "bolder"}}>Customize template</label>
+
+          <label id="wsName" className="form-check-label d-block mb-1">Features</label>
+          <div className="mb-2" onChange={(e) => handleFeatures(e)}>
+            <div className="d-flex ml-2 custom-control custom-checkbox">
+                <input className="custom-control-input" type="checkbox" name="feature" value="mintable" id="mintable" />
+                <label className="form-check-label custom-control-label" htmlFor="mintable" data-id="featureTypeMintable" >Mintable</label>
+            </div>
+            <div className="d-flex ml-2 custom-control custom-checkbox">
+                <input className="custom-control-input" type="checkbox" name="feature" value="burnable" id="burnable" />
+                <label className="form-check-label custom-control-label" htmlFor="burnable" data-id="featureTypeBurnable" >Burnable</label>
+            </div>
+            <div className="d-flex ml-2 custom-control custom-checkbox">
+                <input className="custom-control-input" type="checkbox" name="feature" value="pausable" id="pausable" />
+                <label className="form-check-label custom-control-label" htmlFor="pausable" data-id="featureTypePausable" >Pausable</label>
+            </div>
+          </div>
+
          <label id="wsName" className="form-check-label d-block mb-1">Upgradeability</label>
          <div onChange={(e) => handleUpgradeability(e)}>
            <div className="d-flex ml-2 custom-control custom-radio">
@ -209,6 +234,7 @@ export function Workspace () {
                <label className="form-check-label custom-control-label" htmlFor="uups" data-id="upgradeTypeUups" >UUPS</label>
            </div>
          </div>
+
        </div>

        <label id="wsName" className="form-check-label" style={{fontWeight: "bolder"}} >Workspace name</label>
--- a/libs/remix-ws-templates/src/templates/ozerc1155/index.ts
+++ b/libs/remix-ws-templates/src/templates/ozerc1155/index.ts
@ -1,6 +1,12 @@
 import { erc1155 } from '@openzeppelin/wizard';

 export default async (opts) => {
+    if (opts.features) {
+        erc1155.defaults.mintable = opts.features.mintable
+        erc1155.defaults.burnable = opts.features.burnable
+        erc1155.defaults.pausable = opts.features.pausable
+    }
+
    const filesObj = {
        'contracts/MyToken.sol': erc1155.print({ ...erc1155.defaults, upgradeable: opts.upgradeable}),
        // @ts-ignore
--- a/libs/remix-ws-templates/src/templates/ozerc20/index.ts
+++ b/libs/remix-ws-templates/src/templates/ozerc20/index.ts
@ -1,6 +1,12 @@
 import { erc20 } from '@openzeppelin/wizard';

 export default async (opts) => {
+    if (opts.features) {
+        erc20.defaults.mintable = opts.features.mintable
+        erc20.defaults.burnable = opts.features.burnable
+        erc20.defaults.pausable = opts.features.pausable
+    }
+    
    const filesObj = {
        'contracts/MyToken.sol': erc20.print({ ...erc20.defaults, upgradeable: opts.upgradeable}),
        // @ts-ignore
--- a/libs/remix-ws-templates/src/templates/ozerc721/index.ts
+++ b/libs/remix-ws-templates/src/templates/ozerc721/index.ts
@ -1,6 +1,12 @@
 import { erc721 } from '@openzeppelin/wizard';

 export default async (opts) => {
+    if (opts.features) {
+        erc721.defaults.mintable = opts.features.mintable
+        erc721.defaults.burnable = opts.features.burnable
+        erc721.defaults.pausable = opts.features.pausable
+    }
+
    const filesObj = {
        'contracts/MyToken.sol': erc721.print({ ...erc721.defaults, upgradeable: opts.upgradeable}),
        // @ts-ignore