Blockchain code Metaverse VR

Crypto×VR×SmartContract(417)

スポンサーリンク

//tips

//smart contract

一部.solを変更しているので再度デプロイしておく。この際にganacheを開いていていることを確認。

truffle console
Migrate —reset

—resetとするのは再デプロイであるため前回の記録を消すため。

npm I web3でweb3モジュールもインストール。これによりwalletと接続できるようにする。これはフロントエンドの部分の設計に組み込むため、index.htmlにスクリプトを追加する。

<head>部分に <script src="../node_modules/web3/dist/web3.min.js"></script>を追加。

フロントエンドのイベントロジックについて書かれているapp.jsをさらに開き、web3インスタンス生成とボタンクリック時の接続イベントを追記。

//ページが読み込まれたタイミング
$(document).ready(() =>{

//metamaskがある場合のみ
if(window.ethereum){
//metamaskがあるとwindow.ethereumオブジェクトを確認できるのでそちらでチェック
//インスタンス生成
web3=new Web3(Web3.givenProvider);

}

});

//connect wallet ボタンが押されたら接続
//htmlのclass指定
$(".btn.login").click(async()=>{

try{
//awaitでそちらが完了しないと次に進めないようにしておく
//walletへの接続リクエストを行う
const accounts=await window.ethereum.request({
method:"eth_equestAccounts"

});
user=accounts[0];
//これでwalletと接続された状態

//接続状態であることをフロントエンドへ表示反映させる
$(".btn.login").html("Connected");
$(".btn.swap").html("Enter an amount");
$("#username").html("user");

}catch(err){
alert(error.message);

}

})

Metamaskにはganacheと接続できるようにローカルネットワーク接続を設定しておく。

npm i web3で上手くweb3がインストールできていなかったようなのでnpm install web3で再度インストールを行う。

Uncaught TypeError: web3.eth.Contract is not a constructor

調べてみるとweb3のバージョン変更が多く、こちらも適切なものに合わせる必要があるよう。

truffle developで調べると、

truffle(develop)> web3.version
'1.5.3'

少し新しすぎたのかもしれないと思って変更したがダメなよう。

Requireが認識されないのは環境が整っていないからで

<script src="../node_modules/web3/dist/web3.min.js"></script>

の部分がうまくいっていないことが原因にありそう。

これはnodejs environmentがうまく設定されていないことが原因となる。kickstartではこの部分はreactやnext.jsが担っていた。

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

requireは、モジュール化されたJSファイルをNode.jsから効率よく読み込んで利用できるようにしてくれるもの。

node
Welcome to Node.js v16.2.0.
> global.module.paths
dex/node_modules'

できちんとnode.jsは確認できた。

パスが通っていないことが原因かと、下記を実行するもエラーは変わらず。

echo $NODE_PATH
export NODE_PATH=`npm root -g`
echo $NODE_PATH
/.nodebrew/node/v16.2.0/lib/node_modules

require を理解するツールで結合するしかない可能がある。

と色々やっていたがhtmlにすでにweb3の導入urlが記載されているのでrequireそのものが入らなかったことがわかった。

あとはapp.js内でcoingeckoのapiを取得する。

$(document).ready(async () => {
if(window.ethereum){
web3 = new Web3(Web3.givenProvider);
}
//ページ読み込み時にcoingeckoの情報読み込み
priceData = await getPrice();
console.dir(priceData);
});

//coingecko情報読み取り
async function getPrice(){
const daiData = await (await fetch("https://api.coingecko.com/api/v3/simple/price?ids=dai&vs_currencies=eth")).json();

const compData = await (
await fetch(
"https://api.coingecko.com/api/v3/simple/price?ids=compound-governance-token&vs_currencies=eth"
)
).json();

const linkData = await (
//fetchによりapiの為替情報を取得
await fetch(
"https://api.coingecko.com/api/v3/simple/price?ids=chainlink&vs_currencies=eth"
)
).json();//json形式で帰ってくるので.jsonによりオブジェクト化

//オブジェクトの中の必要な価格部分を抜き出し
//jsonオブジェクトの構造に基づいている
return {
daiEth: daiData.dai.eth,
linkEth: linkData.chainlink.eth,
compEth: compData["compound-governance-token"].eth
}
}

気になったのはいまいち、Liveserver とnode.jsなどの関係がわかっておらず、requireの混乱につながってしまったものと思われる。

cd dex
npm init -y
truffle init
truffle console
truffle(ganache)> migrate

という流れになり、truffleでのdevelop環境設定はここで活きている。

人気の記事

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.