以太坊Dapp开发与metamask交互
以太坊Dapp开发与metamask交互
在上一节当中我们通过truffle与合约实现了交互，接下来我们来使用一个metamask插件来模拟这个过程
首先在浏览器当中点击附加组件，在搜索栏当中搜索MetaMask，并进行安装插件
接下来启动我们的ganache-cli自动生成十个账户
[root@ dapp]# ganache-cli
Ganache CLI v6.12.2 (ganache-core: 2.13.2)
Available Accounts
==================
(0) 0x6FdCbD7ebFB4e4DcF2E03F4e3f54D964e4Ff75c3 (100 ETH)
(1) 0x668218904021E7280adbab6B8B2d6D5113650bc0 (100 ETH)
(2) 0x9fe8388DDDC42401cd5aCd867d378E1620dF85F1 (100 ETH)
(3) 0x4B2742Ca83e1C57b6c2E9B3b9B7dAcD81154Af39 (100 ETH)
(4) 0x5d50A6CFe5FF355E6E1C140361765fC257AD1D5E (100 ETH)
(5) 0xA16a54014509119a8fB2F91ae8dd33396D374514 (100 ETH)
(6) 0xB0Dd860F056964A52fC107436C1856A58aB62b49 (100 ETH)
(7) 0xe4A34844719dbA05bdFd1C418085D4c8C5055957 (100 ETH)
(8) 0x128C7Bb0B3539516b492F44cfC6e6B436C5219DB (100 ETH)
(9) 0xaC20901746083874f2679d57fdd87DeE1748F886 (100 ETH)
Private Keys
==================
(0) 0x29c9555adefcb031617d25df798656c226d2164057a35c3622e5883505e1442d
(1) 0x542506f9127a553dcb47a93fec4ba8e066b0cbc6969bb2c258c78eec96badf5a
(2) 0x80e5e638e36d7009a9b8eb72c9cf7b7a6a312da09936b135c0a9cc5e50a3746c
(3) 0x88ea36df07fe5a27d03efcbe655a938ef8bdbbe1098528b6c0868202ab26bdd4
(4) 0x9670e115795a3b0da454245d58cd4d64a9ccb2b35396d940f141410f9eff96e1
(5) 0x796c6c4c86e3781fd7d20cc7f0e1c3a668493a0f7ab91f3df185da3b2f477414
(6) 0x54a9fb28dff077de7dec91f4405acebe04533b66c3b3d0af08fb2c68b1aec4ae
(7) 0x4798e9ab9b3cefd5858d85fb1f9eb89ad7a6657970c6bfff5565fe01293f49e3
(8) 0x38ed55b0c54727db495f8afc701b199210dd5f4ab4a127afa8478773038f03a0
(9) 0x8c0c211f4dd3cf49f44d80518afd0d8c979780c1042f024175a0e332e5d9fc97
HD Wallet
==================
Mnemonic: palace equip fever avoid unfold delay dirt visa wise matter alley sleep
Base HD Path: m/44'/60'/0'/0/{account_index}
Gas Price
==================
20000000000
Gas Limit
==================
从上面的十个私钥当中随便选一个导入账户，这里我选的是0x29c9555adefcb031617d25df798656c226d2164057a35c3622e5883505e1442d，大家要根据自己ganache-cli生成的十个私钥当中选一个
这里大家需要记住选择测试网络8545
下一步我们把我们上一节的投票Dapp启动
[root@ backupvote]# truffle compile
Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.
[root@ backupvote]# truffle migrate
Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.
Starting migrations...
======================
> Network name: 'development'
> Network id: 1638411947173
> Block gas limit: 6721975 (0x6691b7)
1_initial_migration.js
======================
Deploying 'Migrations'
----------------------
> transaction hash: 0x2608eeef721640acda9b7c06e430ac178cd9af555661e0a6edf88e2e2ca3e426
> Blocks: 0 Seconds: 0
> contract address: 0x91D034D2Ad29d01a8aA6f886A48E55B028Cd3231
> block number: 1
> block timestamp: 1638413460
> account: 0x6FdCbD7ebFB4e4DcF2E03F4e3f54D964e4Ff75c3
> balance: 99.9967165
> gas used: 164175 (0x2814f)
> gas price: 20 gwei
> value sent: 0 ETH
> total cost: 0.0032835 ETH
> Saving migration to chain.
> Saving artifacts
-------------------------------------
> Total cost: 0.0032835 ETH
2_deploy_contracts.js
=====================
Deploying 'Voting'
------------------
> transaction hash: 0xabcd2f7b468188858e8ab3bad2eddf944b5270aaf767d76477e4edfe929b4c6c
> Blocks: 0 Seconds: 0
> contract address: 0x24A57B28F8e6AD9639AaB511Dc73DD548737907a
> block number: 3
> block timestamp: 1638413462
> account: 0x6FdCbD7ebFB4e4DcF2E03F4e3f54D964e4Ff75c3
> balance: 99.99048182
> gas used: 269393 (0x41c51)
> gas price: 20 gwei
> value sent: 0 ETH
> total cost: 0.00538786 ETH
> Saving migration to chain.
> Saving artifacts
-------------------------------------
> Total cost: 0.00538786 ETH
Summary
=======
> Total deployments: 2
> Final cost: 0.00867136 ETH
[root@ backupvote]# cd app
[root@ app]# npm run dev
> [email protected] dev
> webpack-dev-server
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /root/dapp/backupvote/app/dist
ℹ ｢wdm｣: Hash: a42d43d12499d305acec
Version: webpack 4.41.2
Time: 11873ms
Built at: 2021/12/02 上午10:51:38
Asset Size Chunks Chunk Names
index.html 439 bytes [emitted]
index.js 2.42 MiB main [emitted] main
Entrypoint main = index.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {main} [built]
[../build/contracts/Voting.json] 91.3 KiB {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/web3/src/index.js] 2.01 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^./log$] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {main} [built]
[./src/index.js] 2.63 KiB {main} [built]
+ 350 hidden modules
ℹ ｢wdm｣: Compiled successfully.
现在我们的dapp就成功启动了，在浏览器当中输入127.0.0.1:8080,并让MetaMask插件连接到当前URL
现在来测试我们的投票Dapp，当我们给Bob进行投票时，MetaMask会自动跳出，需要我们确认之后才能给Bob进行投票
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码