はじめに
こんにちは〜、本記事は no plan inc. Advent Calendar 2022 の23日目の記事です。
SvelteKitとethers.jsを使って、Metamaskを起動させるところまでやってみたいと思います。
準備
sveltekitのテンプレートをまずは生成しましょう。
npm create svelte@latest web3-sveltekit
Need to install the following packages:
create-svelte@latest
Ok to proceed? (y) y
create-svelte version 2.0.1
Welcome to SvelteKit!
✔ Which Svelte app template? › Skeleton project
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Playwright for browser testing? … No / Yes
✔ Add Vitest for unit testing? … No / Yes
Your project is ready!
✔ Typescript
Inside Svelte components, use <script lang="ts">
✔ ESLint
https://github.com/sveltejs/eslint-plugin-svelte3
✔ Prettier
https://prettier.io/docs/en/options.html
https://github.com/sveltejs/prettier-plugin-svelte#options
Install community-maintained integrations:
https://github.com/svelte-add/svelte-adders
Next steps:
1: cd web3-sveltekit
2: npm install (or pnpm install, etc)
3: git init && git add -A && git commit -m "Initial commit" (optional)
4: npm run dev -- --open
To close the dev server, hit Ctrl-C
Stuck? Visit us at https://svelte.dev/chat
yarn dev
これで表示されるurlにアクセスして表示されるか見てみましょう。
OKですね？
それでは次に svelte-ethers-store をinstallしましょう。
これはReactで言うところの wagmi とか web3-react 的なやつです。
web3.js をいまだに使っている人はいないと思いますが、web3.js の場合は svelte-web3 という姉妹パッケージがあるみたいです。
yarn add svelte-ethers-store
Svelte Kitの作法
routes 以下のディレクトリ構成はディレクトリ名がパスになって、 +page.svelte を作ることによって、それがレンダリングされるようです。
/connect というページを作りたい場合は routes/connect/+page.svelte を作成する必要があります。
作法の詳細は ルーティング - svelte kit docs をご覧ください。
Svelte Storeの作法
大体の svelte-ethers-store のexportされているメンバー？はReadableというものになっています。
詳しくはこちらをみてほしいのですが、簡単に書いておきます。
// App.svelte
<script>
import { count } from './stores.js';
let countValue;
count.subscribe(value => {
countValue = value;
});
</script>
<h1>The count is {countValue}</h1>
import { writable } from 'svelte/store';
export const count = writable(0);
こんな感じのファイルがあったときに、App.svelteでstoreの変数をimportしています。これは正確にはwritableなんですが、この値を変更される度にレンダリングされるようにしようと思うと、subscribeでeventを発生するのを待って、変数に入れる必要があります。
これは非常に面倒です。
それを簡単にするためにシンタックスシュガーとして、 $ が用意されています。
App.svelteは次のように書き直せます。
// App.svelte
<script>
import { count } from './stores.js';
</script>
<h1>The count is {$countValue}</h1>
これが svelte-ethers-store でも出てくるので、覚えておきましょう。
svelte-ethers-store使ってMetamaskを繋げてみる
結論から言うとこんな感じで繋げられます。
<script lang="ts">
import { connected, signer, signerAddress, defaultEvmStores } from 'svelte-ethers-store'
const connect = async () => {
// ここでメタマスクと繋がる
await defaultEvmStores.setProvider();
// レンダリングの部分じゃなくても `$` シンタックスを使って、subscribeを省略可能
const b = await $signer.getBalance();
console.log(b);
}
</script>
<h1>Connect</h1>
<ul>
<li>connected?: {$connected}</li>
<li>signerAddress: {$signerAddress}</li>
</ul>
<button on:click={connect}>connect</button>
$ シンタックスシュガーを使わないとこんな感じです。
<script lang="ts">
import { connected, signer, signerAddress, defaultEvmStores } from 'svelte-ethers-store'
const connect = async () => {
await defaultEvmStores.setProvider();
// かなり冗長。。。
signer.subscribe(async (s) => {
const b = await signer.getBalance();
console.log(b);
});
}
</script>
<h1>Connect</h1>
<ul>
<li>connected?: {$connected}</li>
<li>signerAddress: {$signerAddress}</li>
</ul>
<button on:click={connect}>connect</button>
積極的に$を使っていきたいですね🤑🤑🤑
まとめ
ethersとsvelteを使ったアプリケーションの下地ができました。
このあとはいつも通りの実装になっていくのではないかと思います。
no plan株式会社について
- no plan株式会社は、ブロックチェーン技術、Webサイト開発、ネイティブアプリ開発、チーム育成、などWebサービス全般の開発から運用や教育、支援などを行っています。よくわからない、ふわふわしたノープラン状態でも大丈夫！ご一緒にプランを立てていきましょう！
- no plan株式会社について
- no plan株式会社 | ブロックチェーン実績
- no plan株式会社 | ブログ一覧
Discussion