The document outlines a presentation on web3 full-stack code development, focusing on creating a simple web application that interacts with a blockchain smart contract. It includes code examples in Solidity, demonstrates how to connect to MetaMask, and details functions to set and retrieve values from the contract. The presenter, Gene Leybzon, shares links to his professional profiles and the demo site for the application.

1. WEB3 FULL-STACK
CODE DEVELOPMENT
End-to-end Web3 coding experience
1/6/2022

2. DISCLAIMER
§ The views and opinions expressed by the Presenter are those of the Presenter.
§ Presentation is not intended as legal or financial advice and may not be used as legal or
financial advice.
§ Every effort has been made to assure this information is up-to-date as of the date of
publication.

3. PLAN FOR TODAY
1.Create a simple Web application that
interacts with a contract on
Blockchain
2.Create a script that can access data
from a contract on Blockchain

4. WEB3 BROWSER APPLICATION
Web browser
Single-page Web
Application
Crypto wallet plugin
Blockchain
RPC Calls
Web3js
Library

5. SMART CONTRACT (SOLIDITY)
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.7.0 <0.9.0;
contract Storage {
uint256 number;
function store(uint256 num) public {
number = num;
}
function retrieve() public view returns (uint256){
return number;
}
}

6. REMIX

7. DEPLOYING SMART CONTRACT TO
BLOCKCHAIN

8. INTERACTING WITH THE SMART
CONTRACT FROM REMIX

9. CONTRACT ABI
[
{
"inputs": [],
"name": "retrieve",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "num",
"type": "uint256"
}
],
"name": "store",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
}
]

10. APPLICATION HTML
https://github.com/leybzon/Storage/blob/main/index.

11. CONNECTING TO METAMASK
function connect() {
console.log('Calling connect()')
ethereum
.request({ method: 'eth_requestAccounts' })
.then(handleAccountsChanged)
.catch((err) => {
if (err.code === 4001) {
// EIP-1193 userRejectedRequest error
// If this happens, the user rejected the connection request.
console.log('Please connect to MetaMask.');
$('#status').html('You refused to connect Metamask')
} else {
console.error(err);
}
});
}

12. GETTING VALUE FROM CONTRACT
async function getValue() {
console.log('GetValue')
const contractFirst = new web3.eth.Contract(
abi,
contactAddress
);
contractFirst.methods.retrieve().call().then(function
(result) {
$('#getValue').html(result)
});
}

13. SETTING VALUE IN CONTRACT
async function setValue() {
console.log('Set Value')
input_value = $('#value').val()
if(input_value.trim() == '') {
input_value = 0
}
if(!isNaN(input_value)) {
input_value = parseInt(input_value)
}
const contractFirst = new web3.eth.Contract(
abi,
contactAddress
);
contractFirst.methods.store(input_value).send({from:currentAccount}).then(function
(result) {
console.log(result);
$('#getValue').html(input_value)
});
}

14. DEMO https://www.leybzon.com/web3/storage/index.h

15. READ.JS
const Web3 = require('web3');
const web3 = new
Web3('https://kovan.infura.io/v3/edb1d45f792244bfa97c13d84a809090');
const fs = require("fs");
//const storageABI = require('storageabi.json');
const storageAddress = "0xCB81435D3409F4e30CfD0410380A8F5F51a3B07a";
const storageContractAbi = fs.readFileSync("storageabi.json");
let storageABI = JSON.parse(storageContractAbi);
console.log(storageABI);
const storageContract = new web3.eth.Contract(storageABI, storageAddress);
storageContract.methods.retrieve().call().then(function (result) {
console.log("retrieve() result: ", result);
});

16. DEMO

18. ABOUT PRESENTER
Gene Leybzon
https://www.linkedin.com/in/leybzon/
https://www.meetup.com/members/90
74420/
https://www.leybzon.com
https://clarity.fm/geneleybzon