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

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

2

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

3

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

4

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

5

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

-Blockchain, code, Metaverse, VR
-, ,

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