From 5ea6f8d4ad5275b077cef9a2fb12ae7a4dda7aca Mon Sep 17 00:00:00 2001 From: lianahus Date: Thu, 21 Sep 2023 17:50:31 +0200 Subject: [PATCH] reconstructed playground --- .../src/lib/components/homeTabFile.tsx | 15 +------- .../remix-ui/workspace/src/lib/types/index.ts | 2 +- .../workspace/src/lib/utils/constants.ts | 3 +- libs/remix-ws-templates/src/index.ts | 3 +- .../src/templates/playground/.prettierrc | 38 +++++++++++++++++++ .../src/templates/playground/README.txt | 28 ++++++++++++++ .../playground/contracts/helloWorld.sol | 8 ++++ .../src/templates/playground/index.ts | 16 ++++++++ .../playground/scripts/deploy_with_ethers.ts | 14 +++++++ .../playground/scripts/deploy_with_web3.ts | 14 +++++++ .../playground/scripts/ethers-lib.ts | 29 ++++++++++++++ .../templates/playground/scripts/web3-lib.ts | 36 ++++++++++++++++++ 12 files changed, 190 insertions(+), 16 deletions(-) create mode 100644 libs/remix-ws-templates/src/templates/playground/.prettierrc create mode 100644 libs/remix-ws-templates/src/templates/playground/README.txt create mode 100644 libs/remix-ws-templates/src/templates/playground/contracts/helloWorld.sol create mode 100644 libs/remix-ws-templates/src/templates/playground/index.ts create mode 100644 libs/remix-ws-templates/src/templates/playground/scripts/deploy_with_ethers.ts create mode 100644 libs/remix-ws-templates/src/templates/playground/scripts/deploy_with_web3.ts create mode 100644 libs/remix-ws-templates/src/templates/playground/scripts/ethers-lib.ts create mode 100644 libs/remix-ws-templates/src/templates/playground/scripts/web3-lib.ts diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx index 36ac6572de..9659d7cbed 100644 --- a/libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx +++ b/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']) diff --git a/libs/remix-ui/workspace/src/lib/types/index.ts b/libs/remix-ui/workspace/src/lib/types/index.ts index 5ae27eca3e..5df9b0dc4e 100644 --- a/libs/remix-ui/workspace/src/lib/types/index.ts +++ b/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 } diff --git a/libs/remix-ui/workspace/src/lib/utils/constants.ts b/libs/remix-ui/workspace/src/lib/utils/constants.ts index 688c4731d6..904f03d1f3 100644 --- a/libs/remix-ui/workspace/src/lib/utils/constants.ts +++ b/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' } diff --git a/libs/remix-ws-templates/src/index.ts b/libs/remix-ws-templates/src/index.ts index e11a422750..d97d0c3fdf 100644 --- a/libs/remix-ws-templates/src/index.ts +++ b/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' diff --git a/libs/remix-ws-templates/src/templates/playground/.prettierrc b/libs/remix-ws-templates/src/templates/playground/.prettierrc new file mode 100644 index 0000000000..b2a56f2371 --- /dev/null +++ b/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": {} + } + ] +} diff --git a/libs/remix-ws-templates/src/templates/playground/README.txt b/libs/remix-ws-templates/src/templates/playground/README.txt new file mode 100644 index 0000000000..e27de83769 --- /dev/null +++ b/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 require is not supported by Remix IDE' will be shown. diff --git a/libs/remix-ws-templates/src/templates/playground/contracts/helloWorld.sol b/libs/remix-ws-templates/src/templates/playground/contracts/helloWorld.sol new file mode 100644 index 0000000000..47fabd793a --- /dev/null +++ b/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!"; + } +} \ No newline at end of file diff --git a/libs/remix-ws-templates/src/templates/playground/index.ts b/libs/remix-ws-templates/src/templates/playground/index.ts new file mode 100644 index 0000000000..52e33a5a43 --- /dev/null +++ b/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, + } +} \ No newline at end of file diff --git a/libs/remix-ws-templates/src/templates/playground/scripts/deploy_with_ethers.ts b/libs/remix-ws-templates/src/templates/playground/scripts/deploy_with_ethers.ts new file mode 100644 index 0000000000..d190d654f0 --- /dev/null +++ b/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) + } +})() \ No newline at end of file diff --git a/libs/remix-ws-templates/src/templates/playground/scripts/deploy_with_web3.ts b/libs/remix-ws-templates/src/templates/playground/scripts/deploy_with_web3.ts new file mode 100644 index 0000000000..1378a92657 --- /dev/null +++ b/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) + } +})() \ No newline at end of file diff --git a/libs/remix-ws-templates/src/templates/playground/scripts/ethers-lib.ts b/libs/remix-ws-templates/src/templates/playground/scripts/ethers-lib.ts new file mode 100644 index 0000000000..2753f9bcd0 --- /dev/null +++ b/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} 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, accountIndex?: number): Promise => { + + 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 +} \ No newline at end of file diff --git a/libs/remix-ws-templates/src/templates/playground/scripts/web3-lib.ts b/libs/remix-ws-templates/src/templates/playground/scripts/web3-lib.ts new file mode 100644 index 0000000000..c57e501039 --- /dev/null +++ b/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} 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, from?: string, gas?: number): Promise => { + + 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 +} \ No newline at end of file