はじめに
Nuxt3がリリースされたので、@devprotocol/dev-kitと組み合わせて、DApp開発してみます。
環境
MacOSX 11.6 (Intel Mac)
Node.js v14.17.6
nuxt3 3.0.0-27324955.23397e6 （latest指定）
@devprotocol/dev-kit 5.9.0
ethers 5.5.2
開発
インストール
Nuxt3や必要なパッケージをあらかじめインストールしておきます。
$ npx nuxi init nuxt3-app
$ cd nuxt3-app
$ yarn
$ yarn dev
http://localhost:3000 でアプリケーションが起動します。
TypeScript使うならこれ必要？(もしかしたら実行しなくてもいいかも)
$ yarn nuxi typecheck
その他必要なパッケージもインストール
$ yarn add ethers @devprotocol/dev-kit
アプリケーションを書いてみる
dev-kitのリポジトリにあるexamplesのget-property-info.jsを組み込んでみます。
特定のプロパティアドレスを指定して、その合計ステーキング数と報酬数（どちらも単位はDEV）を表示する感じです。
その他の前提としてはEthereumのmainnetを使うことにします。
app.vue を以下のように変更します。（ソースコード内のコメントは後から追加しました。）
<template>
<div>
<NuxtWelcome />
</div>
</template>
<script>
import { ethers } from "ethers";
import { contractFactory, addresses } from "@devprotocol/dev-kit";
export default {
data() {
const config = useRuntimeConfig();
console.log(config, config.WEB3_PROVIDER_URL);
return {
config,
};
},
async mounted() {
// メインネットを使う
const provider = new ethers.providers.JsonRpcProvider(
this.config.WEB3_PROVIDER_URL
);
const network = await provider.ready;
console.log(network);
const contract = contractFactory(provider);
// 対象のプロパティアドレス
const propertyAddress = "0xac1AC9d00314aE7B4a7d6DbEE4860bECedF92309";
// コントラクトの準備
const registryContractAddress = addresses.eth.main.registry;
const lockupContractAddress = await contract
.registry(registryContractAddress)
.lockup();
// ステーキング数取得
const propertyStakingAmount = await contract
.lockup(lockupContractAddress)
.getPropertyValue(propertyAddress);
const stakingAmount = ethers.BigNumber.from(propertyStakingAmount).div(
new ethers.BigNumber.from(10).pow(18)
);
console.log(
`${propertyAddress}'s staking amount is ${stakingAmount.toBigInt()} DEV`
);
// 報酬数取得
const propertyRewards = await contract
.lockup(lockupContractAddress)
.calculateRewardAmount(propertyAddress);
const reward = ethers.BigNumber.from(propertyRewards[0]).div(
new ethers.BigNumber.from(10).pow(36)
);
console.log(`${propertyAddress}'s rewards is ${reward.toBigInt()} DEV`);
},
};
</script>
nuxt.config.tsは以下
import { defineNuxtConfig } from "nuxt3";
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
build: {
transpile: ["@ethersproject", "ethers"],
},
publicRuntimeConfig: {
WEB3_PROVIDER_URL:
"https://eth-mainnet.alchemyapi.io/v2/XXXX",
},
});
https://eth-mainnet.alchemyapi.io/v2/XXXXは自分で作成したAlchemyのキーとかローカルのEthereumノード使ってね。
で、起動するとエラー発生
Uncaught SyntaxError: import not found: default bignumber.js:9:7
nuxt.config.tsを以下のようにvite.optimizeDepsにエラーが発生しているパッケージを追加していく.
色々対応して別のエラーまで進んだ.
import { defineNuxtConfig } from "nuxt3";
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
build: {
transpile: ["@ethersproject", "ethers"],
},
vite: {
optimizeDeps: {
include: ["bn.js", "js-sha3", "hash.js", "aes-js", "scrypt-js", "bech32"],
},
},
publicRuntimeConfig: {
WEB3_PROVIDER_URL:
"https://eth-mainnet.alchemyapi.io/v2/XXXX",
},
});
ここまでで一旦 git init && git add XXX && git commit しておく。
エラー解析からのさらに開発進める
もう一度起動してエラーの内容をみる.
Uncaught (in promise) TypeError: (intermediate value).BigNumber.from is not a constructor
なんと! new 不要だったのか!!このexamples私が追加したのですが、new不要だったようです。
修正。
diff --git a/app.vue b/app.vue
index baf5fbd..2ecdda9 100644
--- a/app.vue
+++ b/app.vue
@@ -34,7 +34,7 @@ export default {
.lockup(lockupContractAddress)
.getPropertyValue(propertyAddress);
const stakingAmount = ethers.BigNumber.from(propertyStakingAmount).div(
- new ethers.BigNumber.from(10).pow(18)
+ ethers.BigNumber.from(10).pow(18)
);
console.log(
`${propertyAddress}'s staking amount is ${stakingAmount.toBigInt()} DEV`
@@ -44,7 +44,7 @@ export default {
.lockup(lockupContractAddress)
.calculateRewardAmount(propertyAddress);
const reward = ethers.BigNumber.from(propertyRewards[0]).div(
- new ethers.BigNumber.from(10).pow(36)
+ ethers.BigNumber.from(10).pow(36)
);
console.log(`${propertyAddress}'s rewards is ${reward.toBigInt()} DEV`);
},
うまく動いたっぽい!!
コンソールに出力されてる。
0xac1AC9d00314aE7B4a7d6DbEE4860bECedF92309's staking amount is 28645 DEV app.vue:40:13
0xac1AC9d00314aE7B4a7d6DbEE4860bECedF92309's rewards is 16377 DEV app.vue:50:3
最終調整
最後に表示を整える。最終的に以下のようなコードになった。
<template>
<div>
<p>property address: {{ propertyAddress }}</p>
<p>staking: {{ staking?.toBigInt() }} DEV</p>
<p>rewards: {{ reward?.toBigInt() }} DEV</p>
</div>
</template>
<script>
import { ethers } from "ethers";
import { contractFactory, addresses } from "@devprotocol/dev-kit";
export default {
data() {
const config = useRuntimeConfig();
console.log(config, config.WEB3_PROVIDER_URL);
return {
config,
propertyAddress: "0xac1AC9d00314aE7B4a7d6DbEE4860bECedF92309",
staking: undefined,
reward: undefined,
};
},
async mounted() {
// use main net
const registryContractAddress = addresses.eth.main.registry;
const provider = new ethers.providers.JsonRpcProvider(
this.config.WEB3_PROVIDER_URL
);
const network = await provider.ready;
console.log(network);
const contract = contractFactory(provider);
const lockupContractAddress = await contract
.registry(registryContractAddress)
.lockup();
const propertyStakingAmount = await contract
.lockup(lockupContractAddress)
.getPropertyValue(this.propertyAddress);
const stakingAmount = ethers.BigNumber.from(propertyStakingAmount).div(
ethers.BigNumber.from(10).pow(18)
);
console.log(
`${
this.propertyAddress
}'s staking amount is ${stakingAmount.toBigInt()} DEV`
);
const propertyRewards = await contract
.lockup(lockupContractAddress)
.calculateRewardAmount(this.propertyAddress);
const reward = ethers.BigNumber.from(propertyRewards[0]).div(
ethers.BigNumber.from(10).pow(36)
);
console.log(
`${this.propertyAddress}'s rewards is ${reward.toBigInt()} DEV`
);
this.staking = stakingAmount;
this.reward = reward;
},
};
</script>
でブラウザから見るとこんな感じ。
おわりに
Nuxt3でDApp開発できそうです。いい感じです。
以下リポジトリにソースコードがありますので、参考まで。