Blockchain code Metaverse VR

SmartContract×VR×Crypto(606)

スポンサーリンク

//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に格納された文字や数字をループで表示させていけば良く、さらに画像に変換まで行う。力尽きた。

 

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

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

3

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

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

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