Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
create-sort-app
Advanced tools
create-sort-app - npm Package Compare versions
Comparing version 0.0.1 to 0.0.2
303
bin/index.js
@@ -58,15 +58,16 @@ #! /usr/bin/env node | ||
| if (jsonABI) { | ||
| // console.log(jsonABI); | ||
| const DIR_NAME = 'sort-app'; | ||
| console.log("\n"); | ||
| /************** Clone boilerplate code to current directory **************/ | ||
| shell.exec('git clone https://github.com/KhemnarMayuresh/initial-code-for-npm-package') | ||
| console.log("Cloning the boilerplate code"); | ||
| shell.exec('git clone https://github.com/sortxyz/create-sort-app-template ' + DIR_NAME); | ||
| console.log("\n\x1b[32m✓\x1b[0m Cloning boilerplate project from Github"); | ||
| /************** create component folder if not exists **************/ | ||
| if (!fs.existsSync("./initial-code-for-npm-package/src/components")) { | ||
| fs.mkdirSync("./initial-code-for-npm-package/src/components"); | ||
| if (!fs.existsSync("./"+DIR_NAME+"/src/components")) { | ||
| fs.mkdirSync("./"+DIR_NAME+"/src/components"); | ||
| } | ||
| if (!fs.existsSync("./initial-code-for-npm-package/src/components/contracts")) { | ||
| fs.mkdirSync("./initial-code-for-npm-package/src/components/contracts"); | ||
| if (!fs.existsSync("./"+DIR_NAME+"/src/components/contracts")) { | ||
| fs.mkdirSync("./"+DIR_NAME+"/src/components/contracts"); | ||
| } | ||
@@ -79,5 +80,7 @@ | ||
| `; | ||
| fs.writeFileSync("./initial-code-for-npm-package/src/components/contracts/contractData.js", contractDataFileContent); | ||
| fs.writeFileSync("./"+DIR_NAME+"/src/components/contracts/contractData.js", contractDataFileContent); | ||
| var allComponentList = []; | ||
| var readComponentList = []; | ||
| var writeComponentList = []; | ||
| // console.log("Started creating react components for each function call"); | ||
@@ -106,3 +109,7 @@ | ||
| import { CONTRACTADDRESS, CONTRACTABI } from './contracts/contractData'; | ||
| import Card from '@mui/material/Card'; | ||
| import CardContent from '@mui/material/CardContent'; | ||
| import Button from '@mui/material/Button'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import TextField from '@mui/material/TextField'; | ||
@@ -150,29 +157,60 @@ const ${componentName} = (props) => { | ||
| return ( | ||
| <> | ||
| <h4>${element.name}</h4> | ||
| <form onSubmit={handleFormSubmit}>`; | ||
| let formInputs = ""; | ||
| element.inputs.map((ele, ind) => { | ||
| // console.log(ele); | ||
| let id = ele.name ? ele.name : "customInput" + ind; | ||
| if ( | ||
| (ele.type.startsWith("uint") || ele.type.startsWith("int") | ||
| ) && !(ele.type.endsWith("[]"))) { | ||
| formInputs += ` | ||
| <label for="${id}">${id}: ${ele.type}</label><br/> | ||
| <input type="number" id="${id}" name="${id}" min="0" required/><br/> | ||
| `; | ||
| } else { // string, addreess, tuple, tuple[] | ||
| formInputs += ` | ||
| <label for="${id}">${id}: ${ele.type}</label><br/> | ||
| <input type="text" id="${id}" name="${id}" required/><br/> | ||
| `; | ||
| } | ||
| }) | ||
| <Card style={{marginBottom: "20px"}} variant="outlined"> | ||
| <CardContent> | ||
| <Typography variant="h6" gutterBottom> | ||
| ${element.name} | ||
| </Typography> | ||
| <form onSubmit={handleFormSubmit}>`; | ||
| let formInputs = ""; | ||
| element.inputs.map((ele, ind) => { | ||
| // console.log(ele); | ||
| let id = ele.name ? ele.name : "customInput" + ind; | ||
| if ( | ||
| (ele.type.startsWith("uint") || ele.type.startsWith("int") | ||
| ) && !(ele.type.endsWith("[]"))) { | ||
| formInputs += ` | ||
| <label for="${id}">${id} (${ele.type})</label><br/> | ||
| fileData = fileData + formInputs + ` | ||
| <input type="submit" value="Submit"/> | ||
| </form> | ||
| <span>{${element.name}Value?.toLocaleString()}</span> | ||
| </> | ||
| <TextField | ||
| type="number" id="${id}" name="${id}" min="0" required | ||
| fullWidth | ||
| filled | ||
| style={{margin: "12px 0px", color: "#FFF"}} | ||
| color="secondary" | ||
| hiddenLabel | ||
| /> | ||
| `; | ||
| } else { // string, addreess, tuple, tuple[] | ||
| formInputs += ` | ||
| <label for="${id}">${id} (${ele.type})</label><br/> | ||
| <TextField | ||
| type="text" id="${id}" name="${id}" min="0" required | ||
| fullWidth | ||
| filled | ||
| style={{margin: "12px 0px", color: "#FFF"}} | ||
| color="secondary" | ||
| hiddenLabel | ||
| /> | ||
| `; | ||
| } | ||
| }) | ||
| fileData = fileData + formInputs + ` | ||
| <Button variant="outlined" onClick={handleFormSubmit}>Submit</Button> | ||
| </form> | ||
| {${element.name}Value && | ||
| <TextField | ||
| disabled | ||
| value={${element.name}Value?.toLocaleString()} | ||
| fullWidth | ||
| filled | ||
| style={{marginTop: "12px", color: "#FFF"}} | ||
| color="secondary" | ||
| hiddenLabel | ||
| />} | ||
| </CardContent> | ||
| </Card> | ||
| ); | ||
@@ -182,2 +220,3 @@ } | ||
| export default ${componentName};`; | ||
| readComponentList.push(componentName); | ||
| } else { | ||
@@ -188,4 +227,8 @@ //for payable or non-payable functions with parameter value that generates transaction | ||
| import { CONTRACTADDRESS, CONTRACTABI } from './contracts/contractData'; | ||
| import Card from '@mui/material/Card'; | ||
| import CardContent from '@mui/material/CardContent'; | ||
| import Button from '@mui/material/Button'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import TextField from '@mui/material/TextField'; | ||
| const ${componentName} = (props) => { | ||
@@ -232,29 +275,57 @@ | ||
| return ( | ||
| <> | ||
| <h4>${element.name}</h4> | ||
| <form onSubmit={handleFormSubmit}>`; | ||
| let formInputs = ""; | ||
| element.inputs.map((ele, ind) => { | ||
| // console.log(ele); | ||
| let id = ele.name ? ele.name : "customInput" + ind; | ||
| if ( | ||
| (ele.type.startsWith("uint") || ele.type.startsWith("int") | ||
| ) && !(ele.type.endsWith("[]"))) { | ||
| formInputs += ` | ||
| <label for="${id}">${id}: ${ele.type}</label><br/> | ||
| <input type="number" id="${id}" name="${id}" min="0" required/><br/> | ||
| `; | ||
| } else { | ||
| formInputs += ` | ||
| <label for="${id}">${id}: ${ele.type}</label><br/> | ||
| <input type="text" id="${id}" name="${id}" required/><br/> | ||
| `; | ||
| } | ||
| }) | ||
| <Card style={{marginBottom: "20px"}} variant="outlined"> | ||
| <CardContent> | ||
| <Typography variant="h6" gutterBottom> | ||
| ${element.name} | ||
| </Typography> | ||
| <form onSubmit={handleFormSubmit}>`; | ||
| let formInputs = ""; | ||
| element.inputs.map((ele, ind) => { | ||
| // console.log(ele); | ||
| let id = ele.name ? ele.name : "customInput" + ind; | ||
| if ( | ||
| (ele.type.startsWith("uint") || ele.type.startsWith("int") | ||
| ) && !(ele.type.endsWith("[]"))) { | ||
| formInputs += ` | ||
| <label for="${id}">${id} (${ele.type})</label><br/> | ||
| fileData = fileData + formInputs + ` | ||
| <input type="submit" value="Submit"/> | ||
| </form> | ||
| <span style={{wordWrap:"break-word"}}>Transaction Details : {${element.name}Value?JSON.stringify(${element.name}Value):""}</span> | ||
| </> | ||
| <TextField | ||
| type="number" id="${id}" name="${id}" min="0" required | ||
| fullWidth | ||
| filled | ||
| style={{margin: "12px 0px", color: "#FFF"}} | ||
| color="secondary" | ||
| hiddenLabel | ||
| />`; | ||
| } else { | ||
| formInputs += ` | ||
| <label for="${id}">${id} (${ele.type})</label><br/> | ||
| <TextField | ||
| type="text" id="${id}" name="${id}" min="0" required | ||
| fullWidth | ||
| filled | ||
| style={{margin: "12px 0px", color: "#FFF"}} | ||
| color="secondary" | ||
| hiddenLabel | ||
| />`; | ||
| } | ||
| }) | ||
| fileData = fileData + formInputs + ` | ||
| <Button variant="outlined" onClick={handleFormSubmit}>Submit</Button> | ||
| </form> | ||
| {${element.name}Value && | ||
| <TextField | ||
| disabled | ||
| value={${element.name}Value?.toLocaleString()} | ||
| fullWidth | ||
| filled | ||
| style={{marginTop: "12px", color: "#FFF"}} | ||
| color="secondary" | ||
| hiddenLabel | ||
| />} | ||
| </CardContent> | ||
| </Card> | ||
| ); | ||
@@ -264,6 +335,7 @@ } | ||
| export default ${componentName};`; | ||
| writeComponentList.push(componentName); | ||
| } | ||
| /************** Create each function as react Component file **************/ | ||
| fs.writeFileSync("./initial-code-for-npm-package/src/components/" + componentName + ".js", fileData); | ||
| fs.writeFileSync("./"+DIR_NAME+"/src/components/" + componentName + ".js", fileData); | ||
@@ -273,3 +345,3 @@ allComponentList.push(componentName); | ||
| }) | ||
| console.log("Created all react components for each function call"); | ||
| console.log("\x1b[32m✓\x1b[0m Built project based on contract ABI"); | ||
@@ -285,77 +357,44 @@ /************** Update app.js file **************/ | ||
| var AppJSFileContent = ` | ||
| import React, { useContext, useEffect, useState } from 'react'; | ||
| import './App.css'; | ||
| import Web3 from 'web3'; | ||
| `+ importComponents + ` | ||
| var addReadComponentsInHTML = ""; | ||
| readComponentList.map((ele, ind) => { | ||
| addReadComponentsInHTML += ` | ||
| <${ele} web3={walletData.web3} walletAddress={walletData.walletAddress}/>`; | ||
| }) | ||
| function App() { | ||
| var addWriteComponentsInHTML = ""; | ||
| writeComponentList.map((ele, ind) => { | ||
| addWriteComponentsInHTML += ` | ||
| <${ele} web3={walletData.web3} walletAddress={walletData.walletAddress}/>`; | ||
| }) | ||
| const [walletData, setWalletData] = useState({ | ||
| walletAddress: "", | ||
| isConnected: false, | ||
| web3: null | ||
| }); | ||
| /************** Update App.js file **************/ | ||
| try { | ||
| let AppJsFile = fs.readFileSync("./"+DIR_NAME+"/src/App.js", 'utf8'); | ||
| // Add contract components | ||
| AppJsFile = AppJsFile.replace("// CONTRACT IMPORTS", importComponents); | ||
| // Add contract components | ||
| //AppJsFile = AppJsFile.replace("CONTRACT_OVERVIEW", addComponentsInHTML); | ||
| async function connect() { | ||
| let web3; | ||
| //connect to web3 | ||
| if (typeof window !== 'undefined' && typeof window.web3 !== 'undefined') { | ||
| //we are in the browser and metamask is running | ||
| //ETH mainnet 1 | ||
| web3 = new Web3(window.web3.currentProvider); | ||
| let netId = parseInt(window.ethereum.chainId); | ||
| // console.log(netId); | ||
| // if (netId !== 1) { | ||
| // alert('Please select ethereum mainnet network'); | ||
| // console.error('Please select ethereum mainnet network'); | ||
| // return; | ||
| // } | ||
| // Add contract READ components | ||
| AppJsFile = AppJsFile.replace("CONTRACT_READ_FUNCTIONS", addReadComponentsInHTML); | ||
| //set details | ||
| let accounts; | ||
| try { | ||
| accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); | ||
| } catch (error) { | ||
| if (error.code === 4001) { | ||
| console.error("Please allow metamask to connect"); | ||
| } | ||
| return; | ||
| // console.log(error) | ||
| // Add contract WRITE components | ||
| AppJsFile = AppJsFile.replace("CONTRACT_WRITE_FUNCTIONS", addWriteComponentsInHTML); | ||
| // Add the contract address (3 times for 3 occurances) | ||
| AppJsFile = AppJsFile.replaceAll("CONTRACT_ADDRESS", contractAddress); | ||
| fs.writeFileSync("./"+DIR_NAME+"/src/App.js", AppJsFile); | ||
| } catch (err) { | ||
| console.error(err); | ||
| } | ||
| // console.log(accounts) | ||
| if (accounts.length < 1) { | ||
| console.error('Please unlock metamask wallet first!'); | ||
| return; | ||
| } | ||
| // console.log(accounts[0]); | ||
| setWalletData({ | ||
| walletAddress: accounts[0], | ||
| isConnected: true, | ||
| web3: web3 | ||
| }); | ||
| } else { | ||
| //on the browser or user is not running metamask | ||
| console.error("Metamask wallet not found! Please make sure wallet is installed and running!"); | ||
| } | ||
| } | ||
| return ( | ||
| <div className='App'> | ||
| <button variant="success" size="lg" className="connectWallet green-btn" onClick={connect}> | ||
| {walletData.isConnected ? | ||
| walletData.walletAddress.substr(0, 4) + "..." + walletData.walletAddress.substr(-4) | ||
| : "Connect Wallet"} | ||
| </button><br/> | ||
| `+ addComponentsInHTML + ` | ||
| </div> | ||
| ); | ||
| } | ||
| export default App;`; | ||
| /************** Update App.js file **************/ | ||
| fs.writeFileSync("./initial-code-for-npm-package/src/App.js", AppJSFileContent); | ||
| // console.log("App.js file updated with adding all newly created components"); | ||
| console.log("Project created sucessfully"); | ||
| console.log("\x1b[32m✓\x1b[0m Project created sucessfully!"); | ||
| console.log("\n🚀 To get started:"); | ||
| console.log("> cd sort-app"); | ||
| console.log("> npm i"); | ||
| console.log("> npm start\n"); | ||
@@ -362,0 +401,0 @@ } else { |
15
index.js
@@ -58,15 +58,16 @@ #! /usr/bin/env node | ||
| if (jsonABI) { | ||
| const DIR_NAME = 'sort-app'; | ||
| // console.log(jsonABI); | ||
| /************** Clone boilerplate code to current directory **************/ | ||
| shell.exec('git clone https://github.com/KhemnarMayuresh/initial-code-for-npm-package') | ||
| shell.exec('git clone https://github.com/sortxyz/create-sort-app-template ' + DIR_NAME); | ||
| console.log("Cloning the boilerplate code"); | ||
| /************** create component folder if not exists **************/ | ||
| if (!fs.existsSync("./initial-code-for-npm-package/src/components")) { | ||
| fs.mkdirSync("./initial-code-for-npm-package/src/components"); | ||
| if (!fs.existsSync("./"+DIR_NAME+"/src/components")) { | ||
| fs.mkdirSync("./"+DIR_NAME+"/src/components"); | ||
| } | ||
| if (!fs.existsSync("./initial-code-for-npm-package/src/components/contracts")) { | ||
| fs.mkdirSync("./initial-code-for-npm-package/src/components/contracts"); | ||
| if (!fs.existsSync("./"+DIR_NAME+"/src/components/contracts")) { | ||
| fs.mkdirSync("./"+DIR_NAME+"/src/components/contracts"); | ||
| } | ||
@@ -79,3 +80,3 @@ | ||
| `; | ||
| fs.writeFileSync("./initial-code-for-npm-package/src/components/contracts/contractData.js", contractDataFileContent); | ||
| fs.writeFileSync("./"+DIR_NAME+"/src/components/contracts/contractData.js", contractDataFileContent); | ||
@@ -350,3 +351,3 @@ var allComponentList = []; | ||
| /************** Update App.js file **************/ | ||
| fs.writeFileSync("./initial-code-for-npm-package/src/App.js", AppJSFileContent); | ||
| fs.writeFileSync("./"+DIR_NAME+"/src/App.js", AppJSFileContent); | ||
| // console.log("App.js file updated with adding all newly created components"); | ||
@@ -353,0 +354,0 @@ console.log("Project created sucessfully"); |
| { | ||
| "name": "create-sort-app", | ||
| "version": "0.0.1", | ||
| "version": "0.0.2", | ||
| "description": "Generate each smart contract function call as a seperate react component.", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.34%
28251
- Lines of code
- increased by5.29%
657
- Number of medium supply chain risk alerts
- decreased by-20%
4
No dependency changes