//tips
//smart contract
deploy.js内容をlotteryのものをベースにしながら修正。
コンパイル後にデプロイするものをCampaignFactoryのみに絞るのでinterfaceではなく、compiledFactory.interfaceとして指定できるようにする。
//const { interface, bytecode } = require('./compile');
const compiledFactory=require('./build/CampaignFactory.json');
//２種類あるうちのCampaignFactory.jsonのみでいいので
//コントラクトの生成プロセス
const deploy = async () => {
const accounts = await web3.eth.getAccounts();
console.log('Attempting to deploy from account', accounts[0]);
const result = await new web3.eth.Contract(JSON.parse(compiledFactory.interface))
.deploy({ data: compiledFactory.bytecode })
.send({ gas: '1000000', from: accounts[0] });
console.log('Contract deployed to', result.options.address);
provider.engine.stop();
};
deploy();
ここまでできたら
cd ethereum
node deploy.js
を実行。
すると
Attempting to deploy from account 0xA242Fcb2acbb118eA1B6829efe8B7e2087b43986
node:internal/process/promises:246
triggerUncaughtException(err, true /* fromPromise */);
^
[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<Object>".] {
code: 'ERR_UNHANDLED_REJECTION'
}
下記のようにdeploy方法が変わったとのことで変更。
.send({ gas: '1000000', from: accounts[0], gasPrice: '5000000000' });
//.send({ gas: '1000000', from: accounts[0] });
これでもダメ内容なので一旦質問。
ブロックチェーンアプリのデプロイは保留にし、ウェブアプリのreactの方の調整に入る。
React自体にシンプルなブラウザページを表示する機能はあるが、ページの遷移などの複雑な構成にはできないという問題がある。
そのためreactをnext.jsでサポートして、複数ページ構成を使えるようにする。まずは下記でインストール。
cd kickstart
npm install next react react-dom
その後にpagesフォルダを作成し、そこにブラウザ表示する通常のreactページを作成する。
Show.jsとnewcampaign.jsファイルをそこに追加する。
基本的に下記をベースにする。
import React from 'react';
export default ()=>{
return(
<h1>This is the new campaign page!!!</h1>
);
};
さらにpackage.jsonに変更を追加。
"scripts": {
"test": "mocha",
"dev":"next dev"
},
コマンドでnpm run devをした後に、
http://localhost:3000/show
を訪れると、リターンの中に定めた内容がページに表示される。newcampaignも同じくである。
return(
<h1>Welcome to the show page!!!</h1>
);
localhost:3000ページを見られるのはnpm run devが実行されているおかげなので、こちらが実行されているかは確認しておく。
次にweb3生成について考えていく。web3.jsをethereumフォルダに作成。
import Web3 from 'web3';
//現在では下記の記述が必要になっている
window.ethereum.request({ method: "eth_requestAccounts" });
const web3 = new Web3(window.ethereum);
export default web3;
/*
const web3 = new Web3(window.web3.currentProvider);//メタマスクを引数にとっている
//メタマスクは開いたページのweb3と接続する
//逆にメタマスクを導入していない人がアクセスするとエラーになる
export default web3;
*/
そしてこのweb3と接続するfactory.jsスクリプトを作成する。
import web3 from './web3';
//ここはライブラリへのアクセスではないことに注意
//インスタンスへのアクセス
import CampaignFactory from './build/CampaignFactory.json';
//ここではコントラクトのデプロイが前提となっているのでimportすれば良い
const instance=new web3.eth.Contract(
JSON.parse(CampaignFactory.interface),
'ADDRESSの中身'//node deploy.jsの時のもの
)
export default instance;
現時点ではfactoryインスタンスはrinkbyネットワークにアップデートできていることになるが(私はnode deploy.js部分でエラーが出ているのでそこでfactoryインスタンス生成は保留中)、campaginインスタンス生成及びそれとの紐付けは行われていない。
remixのinjectedweb3の機能を用いてそこを補填する。
