//tips
モックアップの際にはfirebaseでいいが、マーケットに出す場合にはしっかりMVPアーキテクチャに対応したGraphQLサーバでvercelにアップロードした方がいいと教えていただいた。ありがたし。
https://reffect.co.jp/react/next-js-graphql
//smart contract
昨日はsendの支払い部分が途中で止まってしまったので、その先を続けていく。
cryptoZombies.methods.zombies(id).call() とすると非同期での外部への通信を行うことになり、Web3プロバイダMetamaskからの応答を受けとった場合に、Promiseがresolve状態となる。
getZombieDetails(15)
.then(function(result) {
console.log("Zombie 15: " + JSON.stringify(result));
});
Web3.jsはページ内でMetamaskでの初期化( web3js = new Web3(web3.currentProvider);)をおこなっていることを考えれば、初期化からのABI+コントラクトアドレス接合からのインスタンス生成(cryptoZombies = new web3js.eth.Contract(cryptoZombiesABI, cryptoZombiesAddress);
)である頃がわかる。
getZombieDetails(15)でノードと通信して、Zombie[] public zombiesからゾンビを取得し、resolveであればthenが続行され、下記のようなresult内容をコンソールに吐き出す。
{
"name": "H4XF13LD ",
"dna": "133",
"level": "9999",
"readyTime": "15221",
"winCount": "9999",
"lossCount": "0"
}
下記のような形で格納されているmapや配列をフロントエンドから取得する。
function zombieToOwner(id) {
return cryptoZombies.methods.zombieToOwner(id).call();
}
function getZombiesByOwner(owner) {
return cryptoZombies.methods.getZombiesByOwner(owner).call();
}
これがコントラクトとやり取りするフロントエンドの第一歩となる。
ここからページに、ユーザーのゾンビ軍団全体を表示させる。
その場合、前述のgetZombiesByOwner（owner）を使って、ユーザーが所有する全ゾンビのIDを探すことになるが、このownerの部分はmetamaskが補完してくれる。
ただ、metamaskの拡張機能で複数のウォレットを持てるようになっているので、ウォレット自体はユーザが指定する手間がかかる。
まずはアクティブアカウントを特定。
var userAccount = web3.eth.accounts[0]
このような形で特定できる。
この0の部分はmetamaskの切り替えによる変動するので、metamaskのアカウント切り替えをページ側で認識できる必要がある。
var accountInterval = setInterval(function() {
// アカウントが変更されているかチェック
if (web3.eth.accounts[0] !== userAccount) {
userAccount = web3.eth.accounts[0];
// 新アカウントでUIをアップデートするように関数コール
updateInterface();
}
}, 100);
setIntervalで100ミリ秒ごとにuserAccountがweb3.eth.accounts[0]と同じかチェックする。これは最初の読み込み時にmatamaskのアカウントごとにindexが割り振られていることを表す。
再度読み込ませることで変更後のものをweb3.eth.accounts[0]に割り振り直すアップデート。
Reactでショートカットする前にJQueryを刻みなさいと説法を解かれたので、そちらも一緒に確認。
getZombieDetails(id)
.then(function(zombie) {
// ES6の「テンプレート文字列」を使い、HTMLに変数をインジェクト。
// それぞれを #zombies div に追加
$("#zombies").append(`<div class="zombie">
<ul>
<li>Name: ${zombie.name}</li>
<li>DNA: ${zombie.dna}</li>
<li>Level: ${zombie.level}</li>
<li>Wins: ${zombie.winCount}</li>
<li>Losses: ${zombie.lossCount}</li>
<li>Ready Time: ${zombie.readyTime}</li>
</ul>
</div>`);
});
これを自分のアカウントのゾンビたちを取得し、そのゾンビごとのstructに格納された文字や数字をループで表示させていけば良く、さらに画像に変換まで行う。力尽きた。
