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

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

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.