Crea tu primer front-end para contratos inteligentes - HackMD

<style> .reveal h1 { font-size: 1.5em; color: #00B520!important; } .reveal h2 { font-size: 1.3em; color: #00B520!important; } .reveal h3 { font-size: 1.2em; color: #00B520!important; } .reveal h4 { font-size: 1em; color: #00B520!important; } .reveal p, .reveal td { color: #000; font-weight: 100; font-size: 0.8em; } .reveal li { color: #000; font-weight: 100; font-size: 0.6em; } .reveal section img { border: 0 solid #fff; box-shadow: 0 0 0 0; background: transparent; } .reveal section pre.part { color: #000; background-color: #eee; } </style>  # Crea tu primer front-end para contratos inteligentes Ilan Olkies ---  ## Sobre mí <div > <div style="width: 50%; float: left;"> <ul> <li>Dos años y medio en IOV</li> <ul> <li>Un año en RSK</li> <li>Un año developer de RNS</li> <li>Un medio año PO de RNS</li> </ul> <li>Solidity + Javascript</li> <li>Otros lenguajes</li> </ul> </div> <div style="width: 50%; float: left;"> <ul> <li>Ciencias de la computación</li> <li>Mate y café</li> <li>Botánica y jardinería</li> <li>Guitarra</li> </ul> </div> </div> ---  ## Agenda 1. Cómo funcionan las aplicaciones descentralizadas? 2. Setup del entorno de desarrollo 3. Creación de un contrato inteligente 4. Simple aplicación React para operar con el contrato inteligente 5. Deploy a la testnet de RSK (si alcanza el tiempo) 6. Conectar aplicación a la testnet de RSK ---  ## 1. Cómo funcionan las aplicaciones descentralizadas? Web2.0 ![](https://i.imgur.com/CEM5Zft.png) ----  El stack de tecnología <img src="https://i.imgur.com/Bb7g3mp.png" style="width: 45%; float:left; margin: 2.5%" /> <img src="https://i.imgur.com/wUY0I4m.png" style="width: 45%; float:left; margin: 2.5%" /> <img src="https://i.imgur.com/Uo33HIe.png" /> ----  Web3.0 ![](https://i.imgur.com/0U4bVTz.png) ----  ### Beneficios ![](https://i.imgur.com/ncfFfkd.png) ---  ## 2. Setup del entorno de desarrollo <img src="https://i.imgur.com/ankSy0d.png" style="max-width: 33%; float: center; max-height: 200px" /> <img src="https://i.imgur.com/ThVvdKD.png" style="max-width: 33%; float: center; max-height: 200px" /> <img src="https://i.imgur.com/yGmR3xr.png" style="max-width: 33%; float: center; max-height: 200px" /> <hr /> ### Ambiente Node <table> <th> <td>Node v12.16.1</td> <td>npm v6.14.3</td> <td>yarn v1.19.1</td> </th> </table> ----  ``` mkdir webinars-2020 cd webinars-2020 npm init npm i --save-dev truffle create-react-app npx truffle init npx create-react-app dapp code . ``` ![](https://i.imgur.com/Bhh8RCb.png) ----  ### A probarlo! ``` npx truffle develop ``` ![](https://i.imgur.com/ezz8M2G.png) ---  ## 3. Creación de un contrato inteligente Un _contrato inteligente_ es un programa público con una unidad de almacenamiento independiente. <img src="https://i.imgur.com/1B2Z52e.png" style="max-height: 350px;" /> Los usuarios de la red RSK, además de enviarse fondos, pueden también usarlos para ejecutar estos programas. ----  Contrato, test unitario y script de deploy. <img src="https://i.imgur.com/fWOn6VN.png" style="width: 58%; float: left; margin: 1%;" /> <img src="https://i.imgur.com/YdZX086.png" style="width: 38%; float: left; margin: 1%;" /> ![](https://i.imgur.com/tHsEI6n.png) ----  Contrato inteligente ```solidity pragma solidity >= 0.5.0 < 0.7.0; contract HelloWorld { string private message; constructor() public { message = "Hello world!"; } function getMessage() external view returns(string memory) { return message; } function setMessage(string calldata newMessage) external { message = newMessage; } } ``` ----  Script de deploy ```javascript const HelloWorld = artifacts.require('HelloWorld'); module.exports = deployer => deployer.deploy(HelloWorld); ``` Pruebalo con ``` npx truffle develop truffle(develop)> migrate ``` ----  Tests unitarios ```javascript const assert = require('assert'); const HelloWorld = artifacts.require('HelloWorld'); contract('Hello World', () => { beforeEach(async () => { this.helloWorld = await HelloWorld.new(); }); it('should have initial message', async () => { const message = await this.helloWorld.getMessage(); assert.equal(message, 'Hello world!'); }); it('should allow to set message', async () => { await this.helloWorld.setMessage('Goodbye.'); const message = await this.helloWorld.getMessage(); assert.equal(message, 'Goodbye.'); }); }); ``` Pruebalo con ``` npx truffle test ``` ---  ## 4. Simple aplicacion React para operar con el smart contract Conceptos clave: - No necesitamos pagar para obtener datos de la red. - Para modificar datos hay que pagar un costo transaccional. El usuario lo pagará con su billetera. - Cualquiera puede utilizar nuestro contrato. Todo está definido en el programa que escribamos. Interfaz para conectarse a contratos: - Los nodos tienen un endpoint http/https/ws - La API de los contratos se representa con un _ABI_ - Los contratos, como las cuentas, tienen un identificador único: la dirección ----  ### Confección del componente ```jsx render () { const { message, value, setting, transactionHash, confirmed } = this.state; return ( <div style={{ padding: 50 }}> <h2>Hello World</h2> <label>message: {message}</label><br /> <button onClick={this.getMessage}>get message</button> <hr /> <label>new message: </label> <input type="text" value={value} onChange={this.handleChange} disabled={setting} /> <button onClick={this.setMessage} disabled={setting}>set message</button> { transactionHash && ( <> <br /> <label> {`transactionHash: ${transactionHash} - ${confirmed ? 'confirmed' : 'wait for confirmation'}`} </label> </> ) } </div> ); } ``` Pruebalo con ``` yarn start ``` ----  El endpoint del nodo local es ``` http://localhost:9545 ``` <hr /> El ABI del contrato está en la carpeta _build/_ Es un arreglo de objetos que describen el nombre de los métodos, los tipos de parametros de entrada y tipos de salida. <hr /> La dirección se reporta en el momento de deploy. Es única en la red. Cuando alguien envie una transacción a su dirección, se ejecutará su programa automaticamente. La transacción contiene los valores de los parámetros de entrada. ----  ### Para obtener información - No necesitamos transacciones - Usamos un nodo como API de consultas ```javascript new Web3('http://localhost:9545') ``` ```javascript getMessage () { this.setState({ message: '...' }); const web3 = new Web3(rskEndpoint); const helloWorld = new web3.eth.Contract(helloWorldABI, helloWorldAddress); helloWorld.methods.getMessage().call() .then(message => this.setState({ message })); } ``` ----  ### Para almacenar información - Debemos emitir transacciones - Usaremos la billetera del navegador del usuario ```jsx new Web3(window.ethereum) ``` ```javascript setMessage() { this.setState({ setting: true, transactionHash: null, confirmed: false }); const { value } = this.state; window.ethereum.enable() .then(accounts => { console.log(accounts) const web3 = new Web3(window.ethereum); const helloWorld = new web3.eth.Contract(helloWorldABI, helloWorldAddress); return helloWorld.methods.setMessage(value).send({ from: accounts[0] }) .on('transactionHash', transactionHash => this.setState({ transactionHash })) .on('receipt', _ => this.setState({ confirmed: true, setting: false })); }) .then(() => this.getMessage()) } ``` ----  Pruebalo con Nifty wallet (o Metamask) https://chrome.google.com/webstore/detail/nifty-wallet/jbdaocneiiinmjbjlgalhcelgbejmnid <hr /> Link útil: [resetear billetera cuando se vuelve a lanzar la blockchain](https://metamask.zendesk.com/hc/en-us/articles/360015488891-Resetting-an-Account) ----  Te quedaste atrás? <iframe width="100%" height="500" src="//jsfiddle.net/ilanolkies/nudzLp69/12/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe> ---  ## 5. Deploy a la testnet de RSK - Los contratos se crean haciendo una transacción que tiene el programa que utilizará el mismo. - Para esto necesitamos pagar el costo tansaccional. - En la red testnet de RSK los fondos son gratis. Es una red _igual_ a la productiva. ----  1. Crea an cuenta nueva con https://iancoleman.io/bip39/ (12 palabras) `march help taste inherit believe dentist worth wet firm junk balance message` Crear archivo `.secret` con las 12 palabras. 2. Instalar `@truffle/hdwallet-provider` ``` npm i @truffle/hdwallet-provider ``` ----  3. Conectarse a RSK testnet. Editar `truffle-config.js` ```javascript const HDWalletProvider = require('@truffle/hdwallet-provider'); const fs = require('fs'); const mnemonic = fs.readFileSync(".secret").toString().trim(); const rskTestnetEndpoint = 'https://public-node.testnet.rsk.co'; module.exports = { networks: { rskTestnet: { provider: () => new HDWalletProvider(mnemonic, rskTestnetEndpoint), network_id: 31, gasPrice: 60000000, }, }, }; ``` Pruebalo con ``` npx truffle console --network rskTestnet ``` ----  Obten fondos en tu cuenta 1. Obten tu dirección ``` truffle(rskTestnet)> const myAccount = await web3.eth.getAccounts().then(accounts => accounts[0]) undefined truffle(rskTestnet)> myAccount '0x...' ``` 2. Navega a https://faucet.rsk.co, completa con tu dirección y espera la confiramción. Puedes consultar tu balance con ``` truffle(rskTestnet)> web3.eth.getBalance(myAccount) ``` ----  Deploy! ``` truffle(rskTestnet)> migrate ``` ---  ## 6. Conectar app a la testnet de RSK - Cambiar las direcciones de los contratos la local por la publica [0xe1db8d54450c45e63f0e60a699cab992aaf8fac2](https://explorer.testnet.rsk.co/address/0xe1db8d54450c45e63f0e60a699cab992aaf8fac2) - Cambiar endpoints de los nodos http://localhost:9545 → https://public-node.testnet.rsk.co - Conecta tu billetera con la red de RSK Selector de arriba a la derecha en Nifty Metamask: https://developers.rsk.co/develop/apps/wallets/metamask/ - Obten fondos para tu billetera en https://faucet.rsk.co - Prueba la app! Puedes correr ``` yarn start ``` ---  ## Resumen 1. Creamos un contrato inteligente, que contiente la lógica pública de nuestra aplicación. 2. Desarrollamos un front end que se conecta a este contrato sin servidores. 3. Publicamos el contrato en una red pública, que permite a cualqueira utilizar nuestra aplicación. ---  Gracias! - \+ sobre rsk? developers.rsk.co - \+ webinars? https://developers.rsk.co/webinars/ - Github? github.com/rsksmart Ilan Olkies - Twitter: [@ilanolkies ](https://twitter.com/ilanolkies) - Mail: ilan@iovlabs.org - Blog: ilanolkies.com - Github: [@ilanolkies](https://github.com/ilanolkies)