Section4 : Building Interative Front-Ends

95. Ethereum App Architecture

 

React 사용 -> ethereum app

 

enter 버튼 = 정보 변경

 

정보 바꾸려면 사용자의 공개, 비밀키를 사용해야 함

 

*사용자들의 비밀키는 어떠한 상황에서도 절대절대 나의 서버로 전송되지 않음

 

 

97. Application Overview ; functionality

 

98. Getting started with Create-React-app

 

npm run start

 

99. Multiple Web3 Instances

 

*provider=allows us to communicate to some given Etherium N/W

 

-> to make use of the provider from the version of web3 that has already been injected on the page by Metamask

 

 

102. Web3 Setup ~

 

web3.js

import Web3 from 'web3';

const web3 = new Web3(window.web3.currentProvider);

export default web3;

 

lottery.js

import web3 from './web3';


const address = '주소'; 

const abi = [
    {
        constant: true, 
        inputs: [], 
        name: 'manager', 
        outputs: [{ name: '', type: 'address' }], 
        payable: false, 
        stateMutability: 'view', 
        type: 'function',
    },
    {
        constant: false, 
        inputs: [], 
        name: 'pickWinner', 
        outputs: [], 
        payable: false, 
        stateMutability: 'nonpayable', 
        type: 'function',
    },
    {
        constant: true, 
        inputs: [], 
        name: 'getPlayers', 
        outputs: [{ name: '', type: 'address[]' }], 
        payable: false, 
        stateMutability: 'view', 
        type: 'function',
    },
    {
        constant: false, 
        inputs: [], 
        name: 'enter', 
        outputs: [], 
        payable: true, 
        stateMutability: 'payable', 
        type: 'function',
    },
    {
        constant: true, 
        inputs: [{ name: '', type: 'uint 256' }], 
        name: 'players', 
        outputs: [{ name: '', type: 'address' }], 
        payable: false, 
        stateMutability: 'view', 
        type: 'function',
    },
    {
        inputs: [], 
        payable: false, 
        stateMutability: 'nonpayable',
        type: 'constructor',
    },
];

export default new web3.eth. Contract (abi, address);

 

app.js

import React, { Component } from 'react';
import './App.css';
import web3 from './web3';
import lottery from './lottery';

class App extends Component {
    state = {
        manager: '',
        players: [],
        balance: '',
        value: '',
        message: ''
    };

    async componentDidMount() {
        const manager = await lottery.methods.manager().call();
        const players = await lottery.methods.getPlayers().call();
        const balance = await web3.eth.getBalance(lottery.options.address);

        this.setState({ manager, players, balance });
    }

    onSubmit = async (event) => {
        event.preventDefault();
        const accounts = await web3.eth.getAccounts();

        this.setState({ message: "Waiting on transaction success...." });
        await lottery methods.enter().send({
            from: accounts[0],
            value: web3.utils.toWei(this.state.value, "ether"),
        });

        this.setState({ message: "You have been entered" });
    };
    
    onClick = async (event) => {
        const accounts = await web3.eth.getAccounts();
        
        this.setState({ message: "Waiting on transaction success..." });
        await lottery.methods.pickWinner().send ({
            from: accounts[0], 
        });

        this.setState({ message: "X winner has been picked!" });
    };
    
    render() { 
        return ( 
        <div>
            <h2>Lottery Contract</h2>
            <p>This contract is managed by {this.state.manager}. There are currently {" "} 
            {this.state.players.length} people entered, competing to win {" "}
            {web3.utils.fromWei(this.state.balance, "ether")} ether! </p>
            <hr /> <form onSubmit={this.onSubmit}>
            
            <h4>Want to try your luck?</h4> 
            <div>
            <label> Amount of ether to enter </label> 
            <input value={this.state.value} onChange={(event) => this.setState({ value: event. target.value })} />
            </div>
            <button>Enter</button>
            </form>
            <hr />
            
            <h4>Ready to pick a winner?</h4> 
            <button onClick={this.onClick}>Pick a winner!</button>
            <hr />
            
            <h1>{this.state.message}</h1> 
            </div>
            );
        }
    }
    export default App;