Blockchain code Metaverse VR

Crypto×VR×SmartContract(397)

スポンサーリンク

//tips

//smart contract

deploy.js内容をlotteryのものをベースにしながら修正。

コンパイル後にデプロイするものをCampaignFactoryのみに絞るのでinterfaceではなく、compiledFactory.interfaceとして指定できるようにする。

//const { interface, bytecode } = require('./compile');
const compiledFactory=require('./build/CampaignFactory.json');
//2種類あるうちの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の機能を用いてそこを補填する。

 

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2022 All Rights Reserved Powered by AFFINGER5.