//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環境設定はここで活きている。
