From 6fe981efcf94759f5c8cbb70c0fbd0045c3aa109 Mon Sep 17 00:00:00 2001 From: Haardik Date: Thu, 16 Dec 2021 12:39:57 -0500 Subject: [PATCH 01/29] Update README.md --- README.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/README.md b/README.md index 69ad781..43d09ff 100644 --- a/README.md +++ b/README.md @@ -133,10 +133,6 @@ Now it is time to create a solidity smart contract. - Deploy the contract under the "Deploy and Run Transactions" tab - Under the Deployed Contracts section, you can test out your functions on the Remix Run tab to make sure your contract works as expected! -

-

-

- ***Be sure to deploy on Ropsten via Remix under the `Injected Web3` environment and confirm the deployment transaction in Metamask*** Make a new temporary file to hold: @@ -207,7 +203,7 @@ provider.listAccounts().then(function(accounts) { async function setMood(){ let mood = document.getElementById("mood").value - setMoodPromise = MoodContract.setMood("patient"); + setMoodPromise = MoodContract.setMood(mood); await setMoodPromise; } ``` From e0aeac957ddec184251c14ffa1b9c4bd558278f8 Mon Sep 17 00:00:00 2001 From: Kacie <44448302+KacieAhmed@users.noreply.github.com> Date: Thu, 6 Jan 2022 23:27:34 -0500 Subject: [PATCH 02/29] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 43d09ff..d8bd106 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Create An Ethereum Dapp with Ethersjs +# Level 7 - Create An Ethereum Dapp with Ethersjs This is a step-by-step tutorial on how to create a front end, deploy a Solidity smart contract, and connect them together. We will use [Metamask](https://metamask.io), [Remix IDE](https://remix.ethereum.org) and [Ethersjs](https://github.com/ethers-io/ethers.js/). From 24178ffaa5a2e0e35bdfecb175a4fb8aa3a4f20b Mon Sep 17 00:00:00 2001 From: Kacie <44448302+KacieAhmed@users.noreply.github.com> Date: Fri, 7 Jan 2022 00:30:33 -0500 Subject: [PATCH 03/29] Update README.md --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index d8bd106..c71b02b 100644 --- a/README.md +++ b/README.md @@ -220,14 +220,14 @@ provider.listAccounts().then(function(accounts) { ### Test Your Work Out! 1. Got your webserver up? Go to [http://127.0.0.1:1337/](http://127.0.0.1:1337/) in your browser to see your page! -2. Test your functions and approve the transactions as needed through Metamask. Note block times are ~15 seconds... so wait a bit to read the state of the blockchain :sunglasses: -3. See your contract and transaction info via [https://ropsten.etherscan.io/] -4. Open a console (`Ctrl + Shift + i`) in the browser to see see the magic happen as you press those buttons :stars: +2. Test your functions and approve the transactions as needed through Metamask. Note block times are ~15 seconds... so wait a bit to read the state of the blockchain +3. See your contract and transaction info via [https://ropsten.etherscan.io/](https://ropsten.etherscan.io/) +4. Open a console (`Ctrl + Shift + i`) in the browser to see see the magic happen as you press those buttons --- -### :tada::confetti_ball::tada::confetti_ball::tada: DONE! :tada::confetti_ball::tada::confetti_ball::tada: -Celebrate! :bowtie: You just made a webpage that interacted with _a real live Ethereum testnet on the internet_! That is not something many folks can say they have done! :rocket: +### DONE! +Celebrate! You just made a webpage that interacted with _a real live Ethereum testnet on the internet_! That is not something many folks can say they have done! --- @@ -245,7 +245,7 @@ lite-server - Here is the contract ([on etherscan](https://ropsten.etherscan.io/address/0xc5afd2d92750612a9619db2282d9037c58fc22cb)) - - We also verified our source code to [ropsten.etherscan.io](https://ropsten.etherscan.io/address/0xc5afd2d92750612a9619db2282d9037c58fc22cb#code) as an added measure for you to verify what the contract is exactly, and also the ABI is available to _the world_! :grin: + - We also verified our source code to [ropsten.etherscan.io](https://ropsten.etherscan.io/address/0xc5afd2d92750612a9619db2282d9037c58fc22cb#code) as an added measure for you to verify what the contract is exactly, and also the ABI is available to _the world_! - The ABI is also in [this file](https://github.com/BlockDevsUnited/BasicFrontEndTutorial/blob/master/Mood_ABI.json) From 1f34cf52c5c5a5e9e16ca75805c80d8986ddeae9 Mon Sep 17 00:00:00 2001 From: Sneh Koul Date: Mon, 10 Jan 2022 20:43:16 -0500 Subject: [PATCH 04/29] fix the license --- README.md | 204 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 113 insertions(+), 91 deletions(-) diff --git a/README.md b/README.md index c71b02b..2b63df0 100644 --- a/README.md +++ b/README.md @@ -1,89 +1,93 @@ # Level 7 - Create An Ethereum Dapp with Ethersjs - This is a step-by-step tutorial on how to create a front end, deploy a Solidity smart contract, and connect them together. - We will use [Metamask](https://metamask.io), [Remix IDE](https://remix.ethereum.org) and [Ethersjs](https://github.com/ethers-io/ethers.js/). +This is a step-by-step tutorial on how to create a front end, deploy a Solidity smart contract, and connect them together. +We will use [Metamask](https://metamask.io), [Remix IDE](https://remix.ethereum.org) and [Ethersjs](https://github.com/ethers-io/ethers.js/). - By the end of this tutorial you will be able to create a simple HTML front end with buttons that can interact with smart contract functions. The tutorial takes place in 3 stages +By the end of this tutorial you will be able to create a simple HTML front end with buttons that can interact with smart contract functions. The tutorial takes place in 3 stages - - Create a basic html web page - - Create a basic solidity smart contract - - Connect the web page with the smart contracts using Ethersjs. +- Create a basic html web page +- Create a basic solidity smart contract +- Connect the web page with the smart contracts using Ethersjs. --- ### Preparation 1. **Download and Install [MetaMask](https://metamask.io)** + - Never used Metamask? Watch [this explainer video](https://youtu.be/wlm4QcA8c4Q?t=66) - *The important bits for us are: `1:06 to 4:14`* - - Change to the Ropsten Tesnet and get a Copy an account's wallet public address + _The important bits for us are: `1:06 to 4:14`_ -

+ - Change to the Ropsten Tesnet and get a Copy an account's wallet public address +

- 2. **Request some Ropsten Tesnet Ether from a faucet loaded into your Metamask Wallet.** - - [Faucet link to request funds](https://ipfs.io/ipfs/QmVAwVKys271P5EQyEfVSxm7BJDKWt42A2gHvNmxLjZMps/) - - [Blog explaining a faucet and how to use one](https://blog.b9lab.com/when-we-first-built-our-faucet-we-deployed-it-on-the-morden-testnet-70bfbf4e317e) + - [Faucet link to request funds](https://ipfs.io/ipfs/QmVAwVKys271P5EQyEfVSxm7BJDKWt42A2gHvNmxLjZMps/) + - [Blog explaining a faucet and how to use one](https://blog.b9lab.com/when-we-first-built-our-faucet-we-deployed-it-on-the-morden-testnet-70bfbf4e317e) 3. **Install a http server. Use any you like, but we recommend `lite-server` for beginners:** + - Install NPM ([Download and Instructions](https://www.npmjs.com/)) - Install lite-server (with NPM in a terminal/command prompt): - ```bash - npm install -g lite-server #install lite-server globally - ``` + ```bash + npm install -g lite-server #install lite-server globally + ``` + --- ### Create and Serve a Simple Webpage The first step is to create a basic html page. - 1. Create a new folder (directory) in your terminal using `mkdir ` - 2. In a code editor (e.g. atom, or visual studio), open the folder - 3. Create a new file called `index.html` - 4. Open index.html - 5. Create html and body tags +1. Create a new folder (directory) in your terminal using `mkdir ` +2. In a code editor (e.g. atom, or visual studio), open the folder +3. Create a new file called `index.html` +4. Open index.html +5. Create html and body tags + ```html - - - - - ``` - We will create an app that simply reads and writes a value to the blockchain. We will need a label, an input, and buttons. - 6. Inside the body tag, add some text, a label and input. - ```html - -

This is my dApp!

-

Here we can set or get the mood:

-
- - - ``` - - 7. Inside the body tag add some buttons. - ```html -
- -
-
- -
- - ``` - - 8. Serve the webpage via terminal/command prompt from the directory that has `index.html` in it and run: + + + +``` + +We will create an app that simply reads and writes a value to the blockchain. We will need a label, an input, and buttons. 6. Inside the body tag, add some text, a label and input. + +```html + +

This is my dApp!

+

Here we can set or get the mood:

+
+ + +``` + +7. Inside the body tag add some buttons. + +```html +
+ +
+
+ +
+``` + +8. Serve the webpage via terminal/command prompt from the directory that has `index.html` in it and run: + ```bash lite-server ``` - 9. Go to [http://127.0.0.1:3000/](http://127.0.0.1:3000/) in your browser to see your page! +9. Go to [http://127.0.0.1:3000/](http://127.0.0.1:3000/) in your browser to see your page! - 10. Your front end is now complete! +10. Your front end is now complete! --- @@ -97,49 +101,60 @@ Now it is time to create a solidity smart contract. 3. Check out the "Solidity Compiler", and "Deploy and Run Transactions" tabs. If they are not present, enable them in the plugin manager 4. Create a new solidity file in remix, named `mood.sol` 5. Write the contract - - Specify the solidity version - ``` + + - Specify the solidity version and add a lisence + + ``` + // SPDX-License-Identifier: MIT pragma solidity ^0.8.1; ``` - - Define the contract - ``` + + - Define the contract + + ``` contract MoodDiary{ - + } ``` + - Inside the contract create a variable called mood + ``` string mood; ``` - - Next, create Read and Write functions + + - Next, create Read and Write functions + ``` //create a function that writes a mood to the smart contract function setMood(string memory _mood) public{ mood = _mood; } - + //create a function the reads the mood from the smart contract function getMood() public view returns(string memory){ return mood; } ``` - - And that's it! your code - like [this](https://github.com/BlockDevsUnited/BasicFrontEndTutorial/blob/master/contracts/mood.sol) -6. Deploy the contract on the Ropsten Testnet. + - And that's it! your code + like [this](https://github.com/BlockDevsUnited/BasicFrontEndTutorial/blob/master/contracts/mood.sol) + +6. Deploy the contract on the Ropsten Testnet. - Make sure your Metamask is connected to the Ropsten Testnet. - Make sure you select the right compiler version to match the solidity contract. (In the compile tab) - Compile the code using the "Solidity Compiler" tab. _Note that it may take a moment to load the compiler_ - Deploy the contract under the "Deploy and Run Transactions" tab - Under the Deployed Contracts section, you can test out your functions on the Remix Run tab to make sure your contract works as expected! -***Be sure to deploy on Ropsten via Remix under the `Injected Web3` environment and confirm the deployment transaction in Metamask*** +**_Be sure to deploy on Ropsten via Remix under the `Injected Web3` environment and confirm the deployment transaction in Metamask_** Make a new temporary file to hold: - - The deployed contract's address - - Copy it via the copy button next to the deployed contracts pulldown in remix's **Run** tab - - The contract ABI ([what is that?](https://solidity.readthedocs.io/en/develop/abi-spec.html)) - - Copy it via the copy button under to the contract in remix's **Compile** tab (also in Details) + +- The deployed contract's address + - Copy it via the copy button next to the deployed contracts pulldown in remix's **Run** tab +- The contract ABI ([what is that?](https://solidity.readthedocs.io/en/develop/abi-spec.html)) + - Copy it via the copy button under to the contract in remix's **Compile** tab (also in Details) --- @@ -158,12 +173,13 @@ Back in your local text editor in `index.html`, add the following code to your h - + - -``` - -2. Inside a new script tag, ensure ethereum is enabled: - -```javascript -window.ethereum.enable(); ``` -3. Now, define an ethers provider. In our case it is Ropsten: +2. Inside the script tag, import the contract ABI ([what is that?](https://solidity.readthedocs.io/en/develop/abi-spec.html)) and specify the contract address on our provider's blockchain: ```javascript -var provider = new ethers.providers.Web3Provider( - web3.currentProvider, - "ropsten" -); + const MoodContractAddress = ""; + const MoodContractABI = + let MoodContract; + let signer; ``` -4. Import the contract ABI ([what is that?](https://solidity.readthedocs.io/en/develop/abi-spec.html)) and specify the contract address on our provider's blockchain: - -```javascript - var MoodContractAddress = ""; - var MoodContractABI = - var MoodContract - var signer -``` - -For the contract ABI, we want to specifically navigate to the [JSON Section](https://docs.soliditylang.org/en/develop/abi-spec.html#json). +For the contract ABI, we want to specifically navigate to the [JSON Section](https://docs.soliditylang.org/en/develop/abi-spec.html#json). We need to describe our smart contract in JSON format. Since we have two methods, this should start as an array, with 2 objects: ``` -var MoodContractABI = [{}, {}] +const MoodContractABI = [{}, {}] ``` From the above page, each object should have the following fields: `constant`, `inputs`, `name`, `outputs`, `payable`, `stateMutability` and `type`. For `setMood`, we describe each field below: + - name: `setMood`, self explanatory - type: `function`, self explanatory - constant: should be `false` because this is a function that updates data @@ -224,8 +241,8 @@ For `setMood`, we describe each field below: - payable: 'false` since this does not accept Ether - inputs: this is an array of inputs to the function. Each object in the array should have `internalType`, `name` and `type`, and these are `string`, `_mood` and `string` respectively - For `getMood`, we describe each field below: + - name: `getMood`, self explanatory - type: `function`, self explanatory - constant: should be `true` because this is a function that retrieves data. Even though this is a function, it is basically a getter @@ -237,7 +254,7 @@ For `getMood`, we describe each field below: Your end result should look like this: ``` -var MoodContractABI = [ +const MoodContractABI = [ { "constant": true, "inputs": [], @@ -271,47 +288,55 @@ var MoodContractABI = [ ] ``` -5. Connect the signer to your metamask account (we use `[0]` as the default), and define the contract object using your contract address, ABI, and signer. +3. Next, Define an ethers provider. In our case it is Ropsten: + +```javascript +const provider = new ethers.providers.Web3Provider(window.provider, "ropsten"); +``` + +4. Request access to the user's wallet and connect the signer to your metamask account (we use `[0]` as the default), and define the contract object using your contract address, ABI, and signer ```javascript -provider.listAccounts().then(function (accounts) { - signer = provider.getSigner(accounts[0]); - MoodContract = new ethers.Contract( - MoodContractAddress, - MoodContractABI, - signer - ); +provider.send("eth_requestAccounts", []).then(() => { + provider.listAccounts().then((accounts) => { + signer = provider.getSigner(accounts[0]); + MoodContract = new ethers.Contract( + MoodContractAddress, + MoodContractABI, + signer + ); + }); }); ``` -6. Create asynchronous functions to call your smart contract functions +5. Create asynchronous functions to call your smart contract functions ```javascript async function getMood() { - getMoodPromise = MoodContract.getMood(); - var Mood = await getMoodPromise; + const getMoodPromise = MoodContract.getMood(); + const Mood = await getMoodPromise; console.log(Mood); } async function setMood() { - let mood = document.getElementById("mood").value; - setMoodPromise = MoodContract.setMood(mood); + const mood = document.getElementById("mood").value; + const setMoodPromise = MoodContract.setMood(mood); await setMoodPromise; } ``` -7. Connect your functions to your html buttons +6. Connect your functions to your html buttons ```html - - + + ``` --- ### Test Your Work Out! -1. Got your webserver up? Go to [http://127.0.0.1:1337/](http://127.0.0.1:1337/) in your browser to see your page! +1. Got your webserver up? Go to [http://127.0.0.1:3000/](http://127.0.0.1:3000/) in your browser to see your page! 2. Test your functions and approve the transactions as needed through Metamask. Note block times are ~15 seconds... so wait a bit to read the state of the blockchain 3. See your contract and transaction info via [https://ropsten.etherscan.io/](https://ropsten.etherscan.io/) 4. Open a console (`Ctrl + Shift + i`) in the browser to see the magic happen as you press those buttons diff --git a/index.html b/index.html index 5de6744..f0696a2 100644 --- a/index.html +++ b/index.html @@ -1,109 +1,107 @@ - + + - - - - Ethersjs Demo + + + + Document - + text-align: center; + font-family: Arial, Helvetica, sans-serif; + } + + div { + width: 20%; + margin: 0 auto; + display: flex; + flex-direction: column; + } + button { + width: 100%; + margin: 10px 0px 5px 0px; + } + +
+

This is my dApp!

+

Here we can set or get the mood:

+
+ + + +
- -
-
-

This is my Ethersjs Demo!

-

Here we can set or get the mood:

-
-
- - -
-
-
-
- -
-
- -
-
-
-
- - + \ No newline at end of file From 014653f5e07ac4cba112678e06c10bbbd41768a7 Mon Sep 17 00:00:00 2001 From: Haardik Date: Mon, 28 Mar 2022 12:38:03 -0400 Subject: [PATCH 22/29] udpate to ethers v5 --- README.md | 5 ++-- index.html | 78 +++++++++++++++++++++++++++--------------------------- 2 files changed, 41 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index 4233330..d95f4a3 100644 --- a/README.md +++ b/README.md @@ -199,9 +199,8 @@ Back in your local text editor in `index.html`, add the following code to your h ```html From 74cae44c5dd6763a800ec436665cbd9e6facd875 Mon Sep 17 00:00:00 2001 From: Haardik Date: Mon, 28 Mar 2022 12:43:16 -0400 Subject: [PATCH 23/29] fix readme typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d95f4a3..8094c83 100644 --- a/README.md +++ b/README.md @@ -290,7 +290,7 @@ const MoodContractABI = [ 3. Next, Define an ethers provider. In our case it is Ropsten: ```javascript -const provider = new ethers.providers.Web3Provider(window.provider, "ropsten"); +const provider = new ethers.providers.Web3Provider(window.ethereum, "ropsten"); ``` 4. Request access to the user's wallet and connect the signer to your metamask account (we use `[0]` as the default), and define the contract object using your contract address, ABI, and signer From 2722e055552f57db87282aa82b53d34286ba1cfc Mon Sep 17 00:00:00 2001 From: Will Olson Date: Mon, 30 May 2022 23:50:32 -0500 Subject: [PATCH 24/29] Update ABI spec (#14) The [updated ABI spec](https://docs.soliditylang.org/en/latest/abi-spec.html) no longer includes the `constant` and `payable` fields. This has caused some confusion for students (example: https://discord.com/channels/872804414107312158/920317342028824637/975053564953112727) --- README.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/README.md b/README.md index 8094c83..3b3db1b 100644 --- a/README.md +++ b/README.md @@ -234,20 +234,16 @@ For `setMood`, we describe each field below: - name: `setMood`, self explanatory - type: `function`, self explanatory -- constant: should be `false` because this is a function that updates data - outputs: should be `[]` because this does not return anything - stateMutability: This is `nonpayable` because this function does not accept Ether -- payable: 'false` since this does not accept Ether - inputs: this is an array of inputs to the function. Each object in the array should have `internalType`, `name` and `type`, and these are `string`, `_mood` and `string` respectively For `getMood`, we describe each field below: - name: `getMood`, self explanatory - type: `function`, self explanatory -- constant: should be `true` because this is a function that retrieves data. Even though this is a function, it is basically a getter - outputs: this has the same type as `inputs` in `setMood`. For `internalType`, `name` and `type`, this should be `string`, `""`, and `string` respectively - stateMutability: This is `view` because this is a view function -- payable: 'false` since this does not accept Ether - inputs: this has no arguments so this should be `[]` Your end result should look like this: @@ -255,7 +251,6 @@ Your end result should look like this: ``` const MoodContractABI = [ { - "constant": true, "inputs": [], "name": "getMood", "outputs": [ @@ -265,12 +260,10 @@ const MoodContractABI = [ "type": "string" } ], - "payable": false, "stateMutability": "view", "type": "function" }, { - "constant": false, "inputs": [ { "internalType": "string", @@ -280,7 +273,6 @@ const MoodContractABI = [ ], "name": "setMood", "outputs": [], - "payable": false, "stateMutability": "nonpayable", "type": "function" } From 2d47a6f2215c7daea8e14f07632e2eb8b4f9fd57 Mon Sep 17 00:00:00 2001 From: Louis <80321832+Jnrlouis@users.noreply.github.com> Date: Tue, 31 May 2022 05:51:10 +0100 Subject: [PATCH 25/29] corrected localhost (#12) From b75efb7542e2252ace04b8810d9453f916739f06 Mon Sep 17 00:00:00 2001 From: phill <56482955+6str@users.noreply.github.com> Date: Fri, 19 Aug 2022 18:37:31 +0100 Subject: [PATCH 26/29] remove extra close script (#17) there are two script open tags and three close tags. removed the accidental extra --- index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/index.html b/index.html index 130a65f..53b92ab 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,6 @@

This is my dApp!

- - \ No newline at end of file + From c7cc29461721777955a5b02ba5aeb5878d66269e Mon Sep 17 00:00:00 2001 From: Umar Khatab Date: Fri, 9 Sep 2022 05:47:35 +0500 Subject: [PATCH 27/29] Updated readme to Goerli testnet --- README.md | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 3b3db1b..f7bfe33 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ # Level 7 - Create An Ethereum Dapp with Ethers.js -### (Forked from [BlockDevsUnited/BasicFrontEndTutorial](https://github.com/BlockDevsUnited/BasicFrontEndTutorial)) - This is a step-by-step tutorial on how to create a front end, deploy a Solidity smart contract, and connect them together. We will use [Metamask](https://metamask.io), [Remix IDE](https://remix.ethereum.org) and [Ethers.js](https://github.com/ethers-io/ethers.js/). @@ -27,11 +25,12 @@ If you would rather learn from a video, we have a recording available of this tu _The important bits for us are: `1:06 to 4:14`_ - - Click Ethereum Mainnet in the top. Change to the Ropsten Tesnet and get a copy of the account's public address on your Metamask Wallet. + - Click Ethereum Mainnet in the top. Change to the Goerli Tesnet and get a copy of the account's public address on your Metamask Wallet. -2. **Request some Ropsten Tesnet Ether from a faucet loaded into your Metamask Wallet.** +2. **Request some Goerli Tesnet Ether from a faucet loaded into your Metamask Wallet.** - - [Faucet link to request funds](https://faucet.egorfine.com/) + - [Faucet link to request funds](https://goerlifaucet.com/) + - [Faucet Link 2 - Chainlink](https://faucets.chain.link/) - [Blog explaining a faucet and how to use one](https://blog.b9lab.com/when-we-first-built-our-faucet-we-deployed-it-on-the-morden-testnet-70bfbf4e317e) 3. **Install a http server. Use any you like, but we recommend `lite-server` for beginners:** @@ -173,14 +172,14 @@ Now it's time to create a Solidity smart contract. - And that's it! Your code should look like [this](https://github.com/LearnWeb3DAO/BasicFrontEndTutorial/blob/master/contracts/mood.sol) -6. Deploy the contract on the Ropsten Testnet. - - Make sure your Metamask is connected to the Ropsten Testnet. +6. Deploy the contract on the Goerli Testnet. + - Make sure your Metamask is connected to the Goerli Testnet. - Make sure you select the right compiler version to match the solidity contract. (In the compile tab) - Compile the code using the "Solidity Compiler" tab. _Note that it may take a moment to load the compiler_ - Deploy the contract under the "Deploy and Run Transactions" tab - Under the Deployed Contracts section, you can test out your functions on the Remix Run tab to make sure your contract works as expected! -**_Be sure to deploy on Ropsten via Remix under the `Injected Web3` environment and confirm the deployment transaction in Metamask_** +**_Be sure to deploy on Goerli via Remix under the `Injected Web3` environment and confirm the deployment transaction in Metamask_** Make a new temporary file to hold: @@ -279,10 +278,10 @@ const MoodContractABI = [ ] ``` -3. Next, Define an ethers provider. In our case it is Ropsten: +3. Next, Define an ethers provider. In our case it is Goerli: ```javascript -const provider = new ethers.providers.Web3Provider(window.ethereum, "ropsten"); +const provider = new ethers.providers.Web3Provider(window.ethereum, "goerli"); ``` 4. Request access to the user's wallet and connect the signer to your metamask account (we use `[0]` as the default), and define the contract object using your contract address, ABI, and signer @@ -329,7 +328,7 @@ async function setMood() { 1. Got your webserver up? Go to [http://127.0.0.1:3000/](http://127.0.0.1:3000/) in your browser to see your page! 2. Test your functions and approve the transactions as needed through Metamask. Note block times are ~15 seconds... so wait a bit to read the state of the blockchain -3. See your contract and transaction info via [https://ropsten.etherscan.io/](https://ropsten.etherscan.io/) +3. See your contract and transaction info via [https://goerli.etherscan.io/](https://goerli.etherscan.io/) 4. Open a console (`Ctrl + Shift + i`) in the browser to see the magic happen as you press those buttons --- @@ -348,13 +347,13 @@ cd BasicFrontEndTutorial lite-server ``` -#### Try and use the following information to interact with an existing contract we published on the Roptsen testnet: +#### Try and use the following information to interact with an existing contract we published on the Goerli testnet: - We have a `MoodDiary` contract instance created [at this transaction](https://ropsten.etherscan.io/tx/0x8da093fdc4ae3e1b469dfff97b414a9800c9fdd8c1c897b6b746faf43aa3b7f8) - Here is the contract ([on etherscan](https://ropsten.etherscan.io/address/0xc5afd2d92750612a9619db2282d9037c58fc22cb)) - - We also verified our source code to [ropsten.etherscan.io](https://ropsten.etherscan.io/address/0xc5afd2d92750612a9619db2282d9037c58fc22cb#code) as an added measure for you to verify what the contract is exactly, and also the ABI is available to _the world_! + - We also verified our source code to [goerli.etherscan.io](https://goerli.etherscan.io/address/0xc5afd2d92750612a9619db2282d9037c58fc22cb#code) as an added measure for you to verify what the contract is exactly, and also the ABI is available to _the world_! - The ABI is also in [this file](https://github.com/LearnWeb3DAO/BasicFrontEndTutorial/blob/master/Mood_ABI.json) From 3b2d544662225654fd1dc3122491a415a5f44bf9 Mon Sep 17 00:00:00 2001 From: Umar Khatab Date: Fri, 9 Sep 2022 11:51:18 +0500 Subject: [PATCH 28/29] Verified Contract on Goerli and changed addresses for that in Readme --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index f7bfe33..30abb4c 100644 --- a/README.md +++ b/README.md @@ -349,11 +349,11 @@ lite-server #### Try and use the following information to interact with an existing contract we published on the Goerli testnet: -- We have a `MoodDiary` contract instance created [at this transaction](https://ropsten.etherscan.io/tx/0x8da093fdc4ae3e1b469dfff97b414a9800c9fdd8c1c897b6b746faf43aa3b7f8) +- We have a `MoodDiary` contract instance created [at this transaction](https://goerli.etherscan.io/tx/0x0e0eb537cc66df48b9c64b4febde7cb8252190834b63a93bd85080da364c2a29) -- Here is the contract ([on etherscan](https://ropsten.etherscan.io/address/0xc5afd2d92750612a9619db2282d9037c58fc22cb)) +- Here is the contract ([on etherscan](https://goerli.etherscan.io/address/0xedf58cf7a49b724574cdd5dd30f0f6f5f33fa56a)) - - We also verified our source code to [goerli.etherscan.io](https://goerli.etherscan.io/address/0xc5afd2d92750612a9619db2282d9037c58fc22cb#code) as an added measure for you to verify what the contract is exactly, and also the ABI is available to _the world_! + - We also verified our source code to [goerli.etherscan.io](https://goerli.etherscan.io/address/0xedf58cf7a49b724574cdd5dd30f0f6f5f33fa56a#code) as an added measure for you to verify what the contract is exactly, and also the ABI is available to _the world_! - The ABI is also in [this file](https://github.com/LearnWeb3DAO/BasicFrontEndTutorial/blob/master/Mood_ABI.json) From 226b97c4bad7e09d3e115086f88637497a17891d Mon Sep 17 00:00:00 2001 From: Umar Khatab Date: Fri, 9 Sep 2022 11:53:27 +0500 Subject: [PATCH 29/29] Added Note that video tutorial is based on Ropsten testnet --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 30abb4c..dba1955 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ By the end of this tutorial you will be able to create a simple HTML front end w ## Prefer a Video? If you would rather learn from a video, we have a recording available of this tutorial on our YouTube. Watch the video by clicking on the screenshot below, or go ahead and read the tutorial! - +Note : This video is based upon Ropsten Testnet but tutorial is migrated to Goerli for future support [![Cryptocurrency Tutorial](https://i.imgur.com/pDcYqIg.png)](https://www.youtube.com/watch?v=aqxAWLi6UMA "dApp Tutorial") ### Preparation