从全栈开发者迈向Web3弄潮儿

├── contracts│   └── Migrations.sol├── migrations│   └── 1_initial_migration.js├── test└── truffle-config.js

npm install --save @truffle/hdwallet-provider

ganache v7.0.1 (@ganache/cli: 0.1.2, @ganache/core: 0.1.2)Starting RPC serverAvailable Accounts==================(0) 0x2B475e4fd7F600fF1eBC7B9457a5b58469b9EDDb (1000 ETH)(1) 0x5D4BB40f6fAc40371eF1C9B90E78F82F6df33977 (1000 ETH)(2) 0xFaab2689Dbf8b7354DaA7A4239bF7dE2D97e3A22 (1000 ETH)(3) 0x8940fcaa55D5580Ac82b790F08500741326836e0 (1000 ETH)(4) 0x4c7a1b7EB717F98Fb0c430eB763c3BB9212F49ad (1000 ETH)(5) 0x22dFCd5df8d4B19a42cB14E87219fea7bcA7C92D (1000 ETH)(6) 0x56882f79ecBc2D68947C6936D4571f547890D07c (1000 ETH)(7) 0xD257AFd8958c6616bf1e61f99B2c65dfd9fEE95A (1000 ETH)(8) 0x4Bb2EE0866578465E3a2d3eCCC41Ea2313372B20 (1000 ETH)(9) 0xdf267AeFeAfE4b7053ca10c3d661a8CB24E98236 (1000 ETH)Private Keys==================(0) 0x5d58d27b0f294e3222bbd99a3a1f07a441ea4873de6c3a2b7c40b73186eb616d(1) 0xb9e52d6cfb2c074fa6a6578b946e3d00ea2a332bb356d0b3198ccf909a97fdc8(2) 0xc52292ce17633fe2724771e81b3b4015374d2a2ea478891dab74f2028184edeb(3) 0xbc7b0b4581592e48ffb4f6420228fd6b3f954ac8cfef778c2a81188415274275(4) 0xc63310ccdd9b8c2da6d80c886bef4077359bb97e435fb4fe83fcbec529a536fc(5) 0x90bc16b1520b66a02835530020e43048198195239ac9880b940d7b2a48b0b32c(6) 0x4fb227297dafb879e148d44cf4872611819412cdd1620ad028ec7c189a53e973(7) 0xf0d4dbe2f9970991ccc94a137cfa7cf284c09d0838db0ce25e76c9ab9f4316d9(8) 0x495fbc6a16ade5647d82c6ad12821667f95d8b3c376dc290ef86c0d926f50fea(9) 0x434f5618a3343c5e3b0b4dbeaf3f41c62777d91c3314b83f74e194be6c09416bHD Wallet==================Mnemonic:      immense salmon nominee toy jungle main lion universe seminar output oppose hungryBase HD Path:  m/44'/60'/0'/0/{account_index}Default Gas Price==================2000000000BlockGas Limit==================30000000Call Gas Limit==================50000000Chain Id==================1337RPC Listening on 127.0.0.1:8545

JSON    development: {      host: "127.0.0.1",     // Localhost (default: none)      port: 8545,            // Standard Ethereum port (default: none)      network_id: "*",       // Any network (default: none)    },

truffle(development)> 

const mnemonic = '12 words here';const wallet = new HDWalletProvider(mnemonic, "http://localhost:8545");

truffle(development)> walletHDWalletProvider {  walletHdpath: "m/44'/60'/0'/0/",  wallets: {... },  addresses: [    '0xa54b012b406c01dd99a6b18ef8b55a15681449af',    '0x6d507a70924ea3393ae1667fa88801650b9964ad',    '0x1237e0a8522a17e29044cde69b7b10b112544b0b',    '0x80b4adb18698cd47257be881684fff1e14836b4b',    '0x09867536371e43317081bed18203df4ca5f0490d',    '0x89f1eeb95b7a659d4748621c8bdbabc33ac47bbb',    '0x54ceb6f0d722dcb33152c953d5758a08045f254d',    '0x25d2a8716792b98bf9cce5781b712f00cf33227e',    '0x37b6364fb97028830bfeb0cb8d2b14e95e2efa05',    '0xe9f56031cb6208ddefcd3cdd5a1a41f7f3400af5'  ],...

npm install --save dotenv

INFURA_API_KEY=INSERT YOUR API KEY HERE (no quotations)MNEMONIC="12 words here"

JavaScriptrequire("dotenv").config();const HDWalletProvider = require("@truffle/hdwallet-provider");

JavaScript   ropsten: {     provider: () =>       new HDWalletProvider(         process.env.MNEMONIC,         `https://ropsten.infura.io/v3/${process.env.INFURA_API_KEY}`       ),     network_id: 3, // Ropsten's id     gas: 5500000, // Ropsten has a lower block limit than mainnet     confirmations: 2, // # of confs to wait between deployments. (default: 0)     timeoutBlocks: 200, // # of blocks before a deployment times out  (minimum/default: 50)     skipDryRun: true // Skip dry run before migrations? (default: false for public nets )    },

JavaScript// SPDX-License-Identifier: UNLICENSED  (it is common practice to include an open source license or declare it unlicensed)pragma solidity ^0.8.7;  // tells the compiler which version to use
contract Homeowners {
    // store the addresses of voters on the blockchain in these 2 arrays    address[] votedYes;    address[] votedNo;
    function voteYes() public {        votedYes.push(msg.sender);    }
    function voteNo() public {        votedNo.push(msg.sender);    }
    function getYesVotes() public view returns (uint) {        return votedYes.length;    }
    function getNoVotes() public view returns (uint) {        return votedNo.length;    }}

.├── JvcHomeownersBallot.sol└── Migrations.sol

JavaScriptconst JvcHomeownersBallot = artifacts.require("JvcHomeownersBallot.sol");
module.exports = function(deployer) { deployer.deploy(JvcHomeownersBallot);};

truffle migrate --network ropsten

Compiling your contracts...===========================> Compiling ./contracts/JvcHomeownersBallot.sol> Artifacts written to /Users/john.vester/projects/jvc/consensys/jvc-homeowners-ballot/build/contracts> Compiled successfully using:   - solc: 0.8.11+commit.d7f03943.Emscripten.clangNetwork up to date.truffle(development)> truffle migrate --network ropstenCompiling your contracts...===========================> Compiling ./contracts/JvcHomeownersBallot.sol> Compiling ./contracts/Migrations.sol> Artifacts written to /Users/john.vester/projects/jvc/consensys/jvc-homeowners-ballot/build/contracts> Compiled successfully using:   - solc: 0.8.11+commit.d7f03943.Emscripten.clang
Starting migrations...======================> Network name:    'ropsten'> Network id:      3> Block gas limit: 8000000 (0x7a1200)
1_initial_migration.js======================   Deploying 'Migrations'   ----------------------   > transaction hash:    0x5f227f26a31a3667a689be2d7fa6121a21153eb219873f6fc9aecede221b3b82   > Blocks: 5            Seconds: 168   > contract address:    0x9e6008B354ba4b9f91ce7b8D95DBC6130324024f   > block number:        11879583   > block timestamp:     1643257600   > account:             0xa54b012B406C01dd99A6B18eF8b55A15681449Af   > balance:             1.573649230299520359   > gas used:            250142 (0x3d11e)   > gas price:           2.506517682 gwei   > value sent:          0 ETH   > total cost:          0.000626985346010844 ETH   Pausing for 2 confirmations...   ------------------------------   > confirmation number: 1 (block: 11879584)   > confirmation number: 2 (block: 11879585)   > Saving migration to chain.   > Saving artifacts   -------------------------------------   > Total cost:     0.000626985346010844 ETH
2_deploy_contracts.js=====================   Deploying 'JvcHomeownersBallot'   -------------------------------   > transaction hash:    0x1bf86b0eddf625366f65a996e633db589cfcef1a4d6a4d6c92a5c1f4e63c767f   > Blocks: 0            Seconds: 16   > contract address:    0xdeCef6474c95E5ef3EFD313f617Ccb126236910e   > block number:        11879590   > block timestamp:     1643257803   > account:             0xa54b012B406C01dd99A6B18eF8b55A15681449Af   > balance:             1.573133154908720216   > gas used:            159895 (0x27097)   > gas price:           2.507502486 gwei   > value sent:          0 ETH   > total cost:          0.00040093710999897 ETH   Pausing for 2 confirmations...   ------------------------------   > confirmation number: 1 (block: 11879591)   > confirmation number: 2 (block: 11879592)   > Saving migration to chain.   > Saving artifacts   -------------------------------------   > Total cost:     0.00040093710999897 ETH
Summary=======> Total deployments:   2> Final cost:          0.001027922456009814 ETH
- Blocks: 0            Seconds: 0- Saving migration to chain.- Blocks: 0            Seconds: 0- Saving migration to chain.

https://ropsten.etherscan.io/

https://ropsten.etherscan.io/address/0xdeCef6474c95E5ef3EFD313f617Ccb126236910e

npx create-react-app jvc-homeowners-ballot-client

cd jvc-homeowners-ballot-clientnpm installWeb3

JavaScriptexport const jvcHomeownersBallot = [  {    "inputs": [],    "name": "voteYes",    "outputs": [],    "stateMutability": "nonpayable",    "type": "function"  },  {    "inputs": [],    "name": "voteNo",    "outputs": [],    "stateMutability": "nonpayable",    "type": "function"  },  {    "inputs": [],    "name": "getYesVotes",    "outputs": [      {        "internalType": "uint256",        "name": "",        "type": "uint256"      }    ],    "stateMutability": "view",    "type": "function",    "constant": true  },  {    "inputs": [],    "name": "getNoVotes",    "outputs": [      {        "internalType": "uint256",        "name": "",        "type": "uint256"      }    ],    "stateMutability": "view",    "type": "function",    "constant": true  }];

JavaScriptimport React, { useState } from "react";import { jvcHomeownersBallot } from "./abi/abi";importWeb3from "web3";import "./App.css";
constWeb3= newWeb3(Web3.givenProvider);const contractAddress = "0xdeCef6474c95E5ef3EFD313f617Ccb126236910e";const storageContract = newWeb3.eth.Contract(jvcHomeownersBallot, contractAddress);

我们可以通过多种方式找到上面提到的 contactAddress。除了我在此使用的 truffle 的 migrate CLI 命令之外，您还可以使用 Etherscan 站点（https://ropsten.etherscan.io/）。

JavaScriptimport React, { useState } from "react";import { jvcHomeownersBallot } from "./abi/abi";importWeb3from "web3";import Nav from "./components/Nav.js";import "./App.css";import { makeStyles } from "@material-ui/core/styles";import Button from "@material-ui/core/Button";import {CircularProgress, Grid, Typography} from "@material-ui/core";
const useStyles = makeStyles((theme) => ({ root: {   "& > *": {     margin: theme.spacing(1),   }, },}));
constWeb3= newWeb3(Web3.givenProvider);const contractAddress = "0xdeCef6474c95E5ef3EFD313f617Ccb126236910e";const storageContract = newWeb3.eth.Contract(jvcHomeownersBallot, contractAddress);
function App() { const classes = useStyles(); const [voteSubmitted, setVoteSubmitted] = useState(""); const [yesVotes, setYesVotes] = useState(0); const [noVotes, setNoVotes] = useState(0); const [waiting, setWaiting] = useState(false);
 const getVotes = async () => {     const postYes = await storageContract.methods.getYesVotes().call();     setYesVotes(postYes);
     const postNo = await storageContract.methods.getNoVotes().call();     setNoVotes(postNo); };
 const voteYes = async () => {     setWaiting(true);
     const accounts = await window.ethereum.enable();     const account = accounts[0];     const gas = (await storageContract.methods.voteYes().estimateGas()) * 1.5;     const post = await storageContract.methods.voteYes().send({         from: account,         gas,     });
     setVoteSubmitted(post.from);     setWaiting(false); };
 const voteNo = async () => {     setWaiting(true);
     const accounts = await window.ethereum.enable();     const account = accounts[0];     const gas = (await storageContract.methods.voteNo().estimateGas() * 1.5);     const post = await storageContract.methods.voteNo().send({         from: account,         gas,     });
     setVoteSubmitted(post.from);     setWaiting(false); };
 return (   <div className={classes.root}>     <Nav />     <div className="main">       <div className="card">         <Typography variant="h3" gutterBottom>             JVC Homeowners Ballot         </Typography>
         <Typography gutterBottom>             How do you wish to vote?         </Typography>
         <span className="buttonSpan">           <Button             id="yesButton"             className="button"             variant="contained"             color="primary"             type="button"             onClick={voteYes}>Vote Yes</Button>           <div className="divider"/>           <Button             id="noButton"             className="button"             color="secondary"             variant="contained"             type="button"             onClick={voteNo}>Vote No</Button>           <div className="divider"/>         </span>
         {waiting && (           <div>               <CircularProgress />               <Typography gutterBottom>                   Submitting Vote ... please wait               </Typography>           </div>         )}
         {!waiting && voteSubmitted && (           <Typography gutterBottom>               Vote Submitted: {voteSubmitted}           </Typography>         )}
         <span className="buttonSpan">            <Button                id="getVotesButton"                className="button"                color="default"                variant="contained"                type="button"                onClick={getVotes}>Get Votes</Button>         </span>
         {(yesVotes > 0 || noVotes > 0) && (           <div>           <Typography variant="h5" gutterBottom>               Current Results           </Typography>
           <Grid container spacing={1}>               <Grid item xs={6}>                   <div className="resultsAnswer resultsHeader">Vote</div>               </Grid>               <Grid item xs={6}>                   <div className="resultsValue resultsHeader"># of Votes</div>               </Grid>               <Grid item xs={6}>                   <div className="resultsAnswer">Yes</div>               </Grid>               <Grid item xs={6}>                   <div className="resultsValue">{yesVotes}</div>               </Grid>               <Grid item xs={6}>                   <div className="resultsAnswer">No</div>               </Grid>               <Grid item xs={6}>                   <div className="resultsValue">{noVotes}</div>               </Grid>             </Grid>           </div>         )}       </div>     </div>   </div> );}
export default App;

yarn start