https://elastos-wiki.netlify.app/assets/js/d6c071e1.cfdcaf2c.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[6387],{3905:(t,e,a)=>{a.d(e,{Zo:()=>p,kt:()=>h});var n=a(7294);function r(t,e,a){return e in t?Object.defineProperty(t,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[e]=a,t}function o(t,e){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),a.push.apply(a,n)}return a}function i(t){for(var e=1;e<arguments.length;e++){var a=null!=arguments[e]?arguments[e]:{};e%2?o(Object(a),!0).forEach((function(e){r(t,e,a[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))}))}return t}function l(t,e){if(null==t)return{};var a,n,r=function(t,e){if(null==t)return{};var a,n,r={},o=Object.keys(t);for(n=0;n<o.length;n++)a=o[n],e.indexOf(a)>=0||(r[a]=t[a]);return r}(t,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);for(n=0;n<o.length;n++)a=o[n],e.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(t,a)&&(r[a]=t[a])}return r}var s=n.createContext({}),c=function(t){var e=n.useContext(s),a=e;return t&&(a="function"==typeof t?t(e):i(i({},e),t)),a},p=function(t){var e=c(t.components);return n.createElement(s.Provider,{value:e},t.children)},m="mdxType",d={inlineCode:"code",wrapper:function(t){var e=t.children;return n.createElement(n.Fragment,{},e)}},u=n.forwardRef((function(t,e){var a=t.components,r=t.mdxType,o=t.originalType,s=t.parentName,p=l(t,["components","mdxType","originalType","parentName"]),m=c(a),u=r,h=m["".concat(s,".").concat(u)]||m[u]||d[u]||o;return a?n.createElement(h,i(i({ref:e},p),{},{components:a})):n.createElement(h,i({ref:e},p))}));function h(t,e){var a=arguments,r=e&&e.mdxType;if("string"==typeof t||r){var o=a.length,i=new Array(o);i[0]=u;var l={};for(var s in e)hasOwnProperty.call(e,s)&&(l[s]=e[s]);l.originalType=t,l[m]="string"==typeof t?t:r,i[1]=l;for(var c=2;c<o;c++)i[c]=a[c];return n.createElement.apply(null,i)}return n.createElement.apply(null,a)}u.displayName="MDXCreateElement"},5573:(t,e,a)=>{a.r(e),a.d(e,{assets:()=>m,contentTitle:()=>c,default:()=>k,frontMatter:()=>s,metadata:()=>p,toc:()=>d});var n=a(7462),r=a(3366),o=(a(7294),a(3905)),i=a(4996),l=["components"],s={title:"Deploy using Remix"},c=void 0,p={unversionedId:"develop/contracts/remix",id:"develop/contracts/remix",title:"Deploy using Remix",description:"Overview",source:"@site/../docs/3.develop/contracts/remix.md",sourceDirName:"3.develop/contracts",slug:"/develop/contracts/remix",permalink:"/develop/contracts/remix",draft:!1,editUrl:"https://github.com/elastos/Elastos.Wiki/edit/master/website/../docs/3.develop/contracts/remix.md",tags:[],version:"current",lastUpdatedBy:"racollette",lastUpdatedAt:1677305716,formattedLastUpdatedAt:"Feb 25, 2023",frontMatter:{title:"Deploy using Remix"},sidebar:"developSidebar",previous:{title:"What is a Smart Contract?",permalink:"/develop/contracts/whatisacontract"},next:{title:"Deploy using Hardhat",permalink:"/develop/contracts/hardhat"}},m={},d=[{value:"Overview",id:"overview",level:2},{value:"What you will learn",id:"what-you-will-learn",level:2},{value:"What you will do",id:"what-you-will-do",level:2},{value:"Getting started with Remix IDE",id:"getting-started-with-remix-ide",level:2},{value:"The smart contract",id:"the-smart-contract",level:3},{value:"Compile Smart Contract",id:"compile-smart-contract",level:2},{value:"<strong>Flatten your solidity contract</strong>",id:"flatten-your-solidity-contract",level:2},{value:"<strong>Verifying on Blockscout</strong>",id:"verifying-on-blockscout",level:2}],u={toc:d},h="wrapper";function k(t){var e=t.components,a=(0,r.Z)(t,l);return(0,o.kt)(h,(0,n.Z)({},u,a,{components:e,mdxType:"MDXLayout"}),(0,o.kt)("h2",{id:"overview"},"Overview"),(0,o.kt)("p",null,"A Hello World style starter project. This tutorial aims to instruct how to deploy a smart contract with a message, and render it in the front-end. You can change the message using the interact panel."),(0,o.kt)("p",null,'This dapp implements a "Hello World" style application that echoes a message passed to the contract to the front end. This tutorial is intended to be followed using the online IDE available at ',(0,o.kt)("a",{parentName:"p",href:"https://remix.ethereum.org/"},"Remix IDE"),"."),(0,o.kt)("h2",{id:"what-you-will-learn"},"What you will learn"),(0,o.kt)("p",null,"This guide introduces an online IDE for blockchain development called Remix. An easy-to-use platform that does not require any downloads, creating accounts or logins.\nHere, the Remix team also provides some explanation about a smart contract typical structure, how to compile, deploy and verify a smart contract pushed into Elastos."),(0,o.kt)("h2",{id:"what-you-will-do"},"What you will do"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Create a file on Remix"),(0,o.kt)("li",{parentName:"ul"},"Upload a pre-built smart contract into the IDE"),(0,o.kt)("li",{parentName:"ul"},"Compile the smart contract"),(0,o.kt)("li",{parentName:"ul"},"Connect the application to the Elastos Smart Chain (ESC) testnet via Metamask"),(0,o.kt)("li",{parentName:"ul"},"Deploy the smart contract"),(0,o.kt)("li",{parentName:"ul"},"Verify the smart contract")),(0,o.kt)("h2",{id:"getting-started-with-remix-ide"},"Getting started with ",(0,o.kt)("a",{parentName:"h2",href:"https://remix.ethereum.org/"},"Remix IDE")),(0,o.kt)("p",null,"Remix is a Ethereum-focused IDE: an online platform to develop smart contracts. To start building a smart contract, click on ",(0,o.kt)("strong",{parentName:"p"},"New File")," and name it ",(0,o.kt)("inlineCode",{parentName:"p"},"HelloWorld.sol"),":"),(0,o.kt)("img",{src:(0,i.Z)("docs/assets/develop/smart-contracts/remix/new-file.png")}),(0,o.kt)("h3",{id:"the-smart-contract"},"The smart contract"),(0,o.kt)("p",null,"Now copy and paste the Smart contract below into the newly created ",(0,o.kt)("inlineCode",{parentName:"p"},"HelloWorld.sol")," file."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js",metastring:'title="HelloWorld.sol"',title:'"HelloWorld.sol"'}

1,'// Specifies that the source code is for a version\n// of Solidity greater than 0.5.10\npragma solidity ^0.5.10;\n\n// A contract is a collection of functions and data (its state)\n// that resides at a specific address on the Ethereum blockchain.\ncontract HelloWorld {\n\n    // The keyword "public" makes variables accessible from outside a contract\n    // and creates a function that other contracts or SDKs can call to access the value\n    string public message;\n\n    // A special function only run during the creation of the contract\n    constructor(string memory initMessage) public {\n        // Takes a string value and stores the value in the memory data storage area,\n        // setting `message` to that value\n        message = initMessage;\n    }\n\n    // A publicly accessible function that takes a string as a parameter\n    // and updates `message`\n    function update(string memory newMessage) public {\n        message = newMessage;\n    }\n}\n')),(0,o.kt)("p",null,"The first line ",(0,o.kt)("inlineCode",{parentName:"p"},"pragma solidity ^0.5.10")," specifies that the source code is for a Solidity version greater than 0.5.10. ",(0,o.kt)("a",{parentName:"p",href:"https://solidity.readthedocs.io/en/latest/layout-of-source-files.html#pragma"},"Pragmas")," are common instructions for compilers about how to treat the source code (e.g., pragma once)."),(0,o.kt)("p",null,"A contract in the sense of Solidity is a collection of code (its functions) and data (its state) that resides at a specific address on the Ethereum blockchain. The line ",(0,o.kt)("inlineCode",{parentName:"p"},"string public message")," declares a public state variable called ",(0,o.kt)("inlineCode",{parentName:"p"},"message")," of type ",(0,o.kt)("inlineCode",{parentName:"p"},"string"),". You can think of it as a single slot in a database that you can query and alter by calling functions of the code that manages the database. The keyword ",(0,o.kt)("inlineCode",{parentName:"p"},"public")," automatically generates a function that allows you to access the current value of the state variable from outside of the contract. Without this keyword, other contracts have no way to access the variable."),(0,o.kt)("p",null,"The ",(0,o.kt)("a",{parentName:"p",href:"https://solidity.readthedocs.io/en/latest/contracts.html#constructor"},"constructor")," is a special function run during the creation of the contract and cannot be called afterward. In this case, it takes a string value ",(0,o.kt)("inlineCode",{parentName:"p"},"initMessage"),", stores the value in the ",(0,o.kt)("a",{parentName:"p",href:"https://solidity.readthedocs.io/en/latest/introduction-to-smart-contracts.html#storage-memory-and-the-stack"},"memory")," data storage area, and sets ",(0,o.kt)("inlineCode",{parentName:"p"},"message")," to that value."),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"update")," function is another public function that is similar to the constructor, taking a string as a parameter, and updating the ",(0,o.kt)("inlineCode",{parentName:"p"},"message")," variable."),(0,o.kt)("h2",{id:"compile-smart-contract"},"Compile Smart Contract"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Go to Solidity Compiler ",(0,o.kt)("img",{src:(0,i.Z)("docs/assets/develop/smart-contracts/remix/Screenshot_2020-02-14_at_1.00.03_PM.png")})),(0,o.kt)("li",{parentName:"ul"},"Select Compiler Version to 0.5.10"),(0,o.kt)("li",{parentName:"ul"},"Now, ",(0,o.kt)("inlineCode",{parentName:"li"},"Compile HelloWorld.sol")),(0,o.kt)("li",{parentName:"ul"},"After Successful Compilation, it will show",(0,o.kt)("img",{src:(0,i.Z)("docs/assets/develop/smart-contracts/remix/Screenshot_2020-02-14_at_1.08.22_PM.png")})),(0,o.kt)("li",{parentName:"ul"},"Now, We have to deploy our smart contract on Elastos Network. For that, we have to connect to the web3 world, this can be done by using any of the services like Metamask, Brave, Portis etc. We will be using Metamask. Please follow this ",(0,o.kt)("a",{parentName:"li",href:"https://support.metamask.io/hc/en-us/articles/360015489531-Getting-started-with-MetaMask"},"tutorial")," to set up a Metamask Account."),(0,o.kt)("li",{parentName:"ul"},"Open Metamask and select Custom RPC from the networks dropdown")),(0,o.kt)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center"}},(0,o.kt)("img",{src:(0,i.Z)("docs/assets/develop/smart-contracts/remix/metamask-cu

1stom-rpc.png"),alt:"RemixIDE_Step1"})),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Put in a Network name - \u201cWAX Testnet\u201d"),(0,o.kt)("li",{parentName:"ul"},'In URL field you can add the URL as "',(0,o.kt)("a",{parentName:"li",href:"https://api-testnet.elastos.io/esc%22"},'https://api-testnet.elastos.io/esc"')),(0,o.kt)("li",{parentName:"ul"},"Enter the Chain ID: 21"),(0,o.kt)("li",{parentName:"ul"},'(Optional Fields) Currency Symbol: "ELA" and Block Explorer URL: "',(0,o.kt)("a",{parentName:"li",href:"https://esc-testnet.elastos.io/%22"},'https://esc-testnet.elastos.io/"'))),(0,o.kt)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center"}},(0,o.kt)("img",{src:(0,i.Z)("docs/assets/develop/smart-contracts/remix/metamask_setup.png"),alt:"RemixIDE_Step1"})),"- Go ahead and click **save** - Copy your address from Metamask",(0,o.kt)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center"}},(0,o.kt)("img",{src:(0,i.Z)("docs/assets/develop/smart-contracts/remix/Screenshot_2020-01-09_at_1.24.49_PM.png"),alt:"RemixIDE_Step1"})),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Head over to ",(0,o.kt)("a",{parentName:"li",href:"https://esc-faucet.elastos.io/"},"Faucet")," and request test ether - you will need this pay for gas on ESC."),(0,o.kt)("li",{parentName:"ul"},"Now, let's Deploy the Smart Contract on the Elasts network"),(0,o.kt)("li",{parentName:"ul"},"Select Injected Provider Metamask in the Environment dropdown and your contract")),(0,o.kt)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center"}},(0,o.kt)("img",{src:(0,i.Z)("docs/assets/develop/smart-contracts/remix/injected-provider.png"),alt:"RemixIDE_Step1"})),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Accept the Connection Request.")),(0,o.kt)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center"}},(0,o.kt)("img",{src:(0,i.Z)("docs/assets/develop/smart-contracts/remix/Screenshot_2020-02-14_at_1.59.10_PM.png"),alt:"RemixIDE_Step1"})),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Once Metamask is connected to Remix, the \u2018Deploy\u2019 transaction would generate another metamask popup that requires transaction confirmation.")),(0,o.kt)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center"}},(0,o.kt)("img",{src:(0,i.Z)("docs/assets/develop/smart-contracts/remix/Screenshot_2020-02-14_at_1.45.23_PM.png"),alt:"RemixIDE_Step1"})),(0,o.kt)("p",null,(0,o.kt)("strong",{parentName:"p"},"Congratulations!")," You have successfully deployed the ",(0,o.kt)("strong",{parentName:"p"},"HelloWorld")," Smart Contract. Now you can interact with the Smart Contract. Check the deployment status ",(0,o.kt)("a",{parentName:"p",href:"https://esc-testnet.elastos.io/"},"here"),"."),(0,o.kt)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center"}},(0,o.kt)("img",{src:(0,i.Z)("docs/assets/develop/smart-contracts/remix/Screenshot_2020-02-14_at_2.00.19_PM.png"),alt:"RemixIDE_Step1"})),(0,o.kt)("h1",{id:"verifying-your-contracts-on-elastos-block-explorer"},(0,o.kt)("strong",{parentName:"h1"},"Verifying your Contracts on Elastos Block Explorer")),(0,o.kt)("p",null,"The first and foremost step is to flatten the solidity contract into a single file."),(0,o.kt)("h2",{id:"flatten-your-solidity-contract"},(0,o.kt)("strong",{parentName:"h2"},"Flatten your solidity contract")),(0,o.kt)("p",null,"Install ",(0,o.kt)("a",{parentName:"p",href:"https://github.com/nomiclabs/truffle-flattener"},"truffle-flattener")," or ",(0,o.kt)("a",{parentName:"p",href:"https://github.com/RyuuGan/sol-merger"},"sol-merger")),(0,o.kt)("p",null,"Flatten using command"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},'sol-merger \\"./contracts/*.sol\\" ./build')),(0,o.kt)("h2",{id:"verifying-on-blockscout"},(0,o.kt)("strong",{parentName:"h2"},"Verifying on Blockscout")),(0,o.kt)("p",null,"Navigate to your contract's Blockscout page and then click verify and publish"),(0,o.kt)("img",{src:(0,i.Z)("docs/assets/develop/smart-contracts/remix/verify-publish.png")}),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Select ",(0,o.kt)("inlineCode",{parentName:"li"},"Solidity (Single File)")," in compiler type"),(0,o.kt)("li",{parentName:"ul"},"Select appropriate compiler version"),(0,o.kt)("li",{parentName:"ul"},"Choose the license type of your contract")),(0,o.kt)("p",null,"Onto the next section, paste your flattended contract there."),(0,o.kt)("p",null,"If you had enabled o

1ptimization then adjust the ",(0,o.kt)("inlineCode",{parentName:"p"},"optimization")," section accordingly."),(0,o.kt)("p",null,"Constructor arguments should have been filled in automatically, if not, they can be retrieved from the trailing bytes of the deployment transaction, they resemble something like ",(0,o.kt)("inlineCode",{parentName:"p"},"000000000000000000000000a6fa4fb5f76172d178d61b04b0ecd319c5d1c0aa")))}k.isMDXComponent=!0}}]);