reconstructed playground

libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx

@@ -135,22 +135,11 @@ function HomeTabFile({ plugin }: HomeTabFileProps) {
     const wName = 'Playground'
     const workspaces = await plugin.call('filePanel', 'getWorkspaces')
     if (!workspaces.find((workspace) => workspace.name === wName)) {
-      await plugin.call('filePanel', 'createWorkspace', wName, 'remixDefault')
+      await plugin.call('filePanel', 'createWorkspace', wName, 'playground')
     }
     await plugin.call('filePanel', 'switchToWorkspace', { name: wName, isLocalHost: false })
     await plugin.call('filePanel', 'switchToWorkspace', { name: wName, isLocalHost: false }) // calling once is not working.
-
-    const content = `// SPDX-License-Identifier: MIT
-    pragma solidity >=0.7.0 <0.9.0;
-
-    contract HelloWorld {
-      function print() public pure returns (string memory) {
-        return "Hello World!";
-      }
-    }
-    `
-    const { newPath } = await plugin.call('fileManager', 'writeFileNoRewrite', '/contracts/helloWorld.sol', content)
-    await plugin.call('fileManager', 'open', newPath)
+    await plugin.call('fileManager', 'open', '/contracts/helloWorld.sol')
   }
   const uploadFile = async (target) => {
     _paq.push(['trackEvent', 'hometab', 'filesSection', 'uploadFile'])

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

@@ -28,7 +28,7 @@ export interface JSONStandardInput {
   }
 }
 export type MenuItems = action[]
-export type WorkspaceTemplate = 'gist-template' | 'code-template' | 'remixDefault' | 'blank' | 'ozerc20' | 'zeroxErc20' | 'ozerc721'
+export type WorkspaceTemplate = 'gist-template' | 'code-template' | 'remixDefault' | 'blank' | 'ozerc20' | 'zeroxErc20' | 'ozerc721' | 'playground'
 export interface WorkspaceProps {
   plugin: FilePanelType
 }

libs/remix-ui/workspace/src/lib/utils/constants.ts

@@ -80,5 +80,6 @@ export const TEMPLATE_NAMES = {
   'ozerc721': 'OpenZeppelin ERC721',
   'ozerc1155': 'OpenZeppelin ERC1155',
   'zeroxErc20': '0xProject ERC20',
-  'gnosisSafeMultisig': 'Gnosis Safe'
+  'gnosisSafeMultisig': 'Gnosis Safe',
+  'playground': 'Playground'
 }

libs/remix-ws-templates/src/index.ts

@@ -1,10 +1,11 @@
-export { default as remixDefault } from './templates/remixDefault'
+export { default as remixDefault } from './templates/playground'
 export { default as blank } from './templates/blank'
 export { default as ozerc20 } from './templates/ozerc20'
 export { default as ozerc721 } from './templates/ozerc721'
 export { default as ozerc1155 } from './templates/ozerc1155'
 export { default as zeroxErc20 } from './templates/zeroxErc20'
 export { default as gnosisSafeMultisig } from './templates/gnosisSafeMultisig'
+export { default as playground } from './templates/playground'
 
 export { contractDeployerScripts } from './script-templates/contract-deployer'
 export { etherscanScripts } from './script-templates/etherscan'

libs/remix-ws-templates/src/templates/playground/.prettierrc

@@ -0,0 +1,38 @@
+{
+    "overrides": [
+        {
+            "files": "*.sol",
+            "options": {
+                "printWidth": 80,
+                "tabWidth": 4,
+                "useTabs": false,
+                "singleQuote": false,
+                "bracketSpacing": false
+            }
+        },
+        {
+            "files": "*.yml",
+            "options": {}
+        },
+        {
+            "files": "*.yaml",
+            "options": {}
+        },
+        {
+            "files": "*.toml",
+            "options": {}
+        },
+        {
+            "files": "*.json",
+            "options": {}
+        },
+        {
+            "files": "*.js",
+            "options": {}
+        },
+        {
+            "files": "*.ts",
+            "options": {}
+        }
+    ]
+}

libs/remix-ws-templates/src/templates/playground/README.txt

@@ -0,0 +1,28 @@
+REMIX DEFAULT WORKSPACE
+
+Remix default workspace is present when:
+i. Remix loads for the very first time 
+ii. A new workspace is created with 'Default' template
+iii. There are no files existing in the File Explorer
+
+This workspace contains 3 directories:
+
+1. 'contracts': Holds three contracts with increasing levels of complexity.
+2. 'scripts': Contains four typescript files to deploy a contract. It is explained below.
+3. 'tests': Contains one Solidity test file for 'Ballot' contract & one JS test file for 'Storage' contract.
+
+SCRIPTS
+
+The 'scripts' folder has four typescript files which help to deploy the 'Storage' contract using 'web3.js' and 'ethers.js' libraries.
+
+For the deployment of any other contract, just update the contract's name from 'Storage' to the desired contract and provide constructor arguments accordingly 
+in the file `deploy_with_ethers.ts` or  `deploy_with_web3.ts`
+
+In the 'tests' folder there is a script containing Mocha-Chai unit tests for 'Storage' contract.
+
+To run a script, right click on file name in the file explorer and click 'Run'. Remember, Solidity file must already be compiled.
+Output from script will appear in remix terminal.
+
+Please note, require/import is supported in a limited manner for Remix supported modules.
+For now, modules supported by Remix are ethers, web3, swarmgw, chai, multihashes, remix and hardhat only for hardhat.ethers object/plugin.
+For unsupported modules, an error like this will be thrown: '<module_name> module require is not supported by Remix IDE' will be shown.

libs/remix-ws-templates/src/templates/playground/contracts/helloWorld.sol

@@ -0,0 +1,8 @@
+// SPDX-License-Identifier: MIT
+pragma solidity >=0.6.12 <0.9.0;
+
+contract HelloWorld {
+  function print() public pure returns (string memory) {
+    return "Hello World!";
+  }
+}

libs/remix-ws-templates/src/templates/playground/index.ts

@@ -0,0 +1,16 @@
+export default async () => {
+  return {
+    // @ts-ignore
+    'contracts/helloWorld.sol': (await import('raw-loader!./contracts/helloWorld.sol')).default,
+    // @ts-ignore
+    'scripts/deploy_with_ethers.ts': (await import('!!raw-loader!./scripts/deploy_with_ethers.ts')).default,
+    // @ts-ignore
+    'scripts/deploy_with_web3.ts': (await import('!!raw-loader!./scripts/deploy_with_web3.ts')).default,
+    // @ts-ignore
+    'scripts/ethers-lib.ts': (await import('!!raw-loader!./scripts/ethers-lib.ts')).default,
+    // @ts-ignore
+    'scripts/web3-lib.ts': (await import('!!raw-loader!./scripts/web3-lib.ts')).default,
+    // @ts-ignore
+    '.prettierrc.json': (await import('raw-loader!./.prettierrc')).default,
+  }
+}

libs/remix-ws-templates/src/templates/playground/scripts/deploy_with_ethers.ts

@@ -0,0 +1,14 @@
+// This script can be used to deploy the "Storage" contract using ethers.js library.
+// Please make sure to compile "./contracts/1_Storage.sol" file before running this script.
+// And use Right click -> "Run" from context menu of the file to run the script. Shortcut: Ctrl+Shift+S
+
+import { deploy } from './ethers-lib'
+
+(async () => {
+  try {
+    const result = await deploy('HelloWorld', [])
+    console.log(`address: ${result.address}`)
+  } catch (e) {
+    console.log(e.message)
+  }
+})()

libs/remix-ws-templates/src/templates/playground/scripts/deploy_with_web3.ts

@@ -0,0 +1,14 @@
+// This script can be used to deploy the "Storage" contract using Web3 library.
+// Please make sure to compile "./contracts/1_Storage.sol" file before running this script.
+// And use Right click -> "Run" from context menu of the file to run the script. Shortcut: Ctrl+Shift+S
+
+import { deploy } from './web3-lib'
+
+(async () => {
+  try {
+    const result = await deploy('HelloWorld', [])
+    console.log(`address: ${result.address}`)
+  } catch (e) {
+    console.log(e.message)
+  }
+})()

libs/remix-ws-templates/src/templates/playground/scripts/ethers-lib.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-ws-templates/src/templates/playground/scripts/web3-lib.ts

@@ -0,0 +1,36 @@
+import Web3 from 'web3'
+import { Contract, ContractSendMethod, Options } from 'web3-eth-contract'
+
+/**
+ * Deploy the given contract
+ * @param {string} contractName name of the contract to deploy
+ * @param {Array<any>} args list of constructor' parameters
+ * @param {string} from account used to send the transaction
+ * @param {number} gas gas limit
+ * @return {Options} deployed contract
+ */
+export const deploy = async (contractName: string, args: Array<any>, from?: string, gas?: number): Promise<Options> => {
+
+  const web3 = new Web3(web3Provider)
+  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`
+
+  const metadata = JSON.parse(await remix.call('fileManager', 'getFile', artifactsPath))
+
+  const accounts = await web3.eth.getAccounts()
+
+  const contract: Contract  = new web3.eth.Contract(metadata.abi)
+
+  const contractSend: ContractSendMethod = contract.deploy({
+    data: metadata.data.bytecode.object,
+    arguments: args
+  })
+
+  const newContractInstance = await contractSend.send({
+    from: from || accounts[0],
+    gas: gas || 1500000
+  })
+  return newContractInstance.options    
+}