[Astar]コントラクト備忘録47（Polkadot.jsを使って、ウォレット接続を行おう！）
本日は、こちらの「Polkadot.js」を元に、ウォレット接続を行っていこうと思います。
こちらの「Cookbook」から確認します。
「@polkadot/extension-dapp」の「web3Accounts」と「web3Enable」が今回のキーです。
https://polkadot.js.org/docs/extension/cookbook
ちなみに、「next.js」の場合はこのままやるとエラーが出ます。
こちらのサイトが参考になりました。
「@polkadot/extension-dapp」では「window」が使われます。
next.jsはサーバーサイドレンダリングがされてしまうので、下のように設定する必要があります。
https://techblg.app/articles/how-to-solve-reference-error-window-is-not-defined-with-polkadotjs-on-nextjs/
では、これらを踏まえ、今回、下のようなコードを使用しました。
import React, { useState } from 'react';
const inter = Inter({ subsets: ['latin'] })
export default function Home() {
const [address, setAddress] = useState('');
const [source, setSource] = useState('');
async function connectWallet () {
const { web3Accounts, web3Enable} = await import(
"@polkadot/extension-dapp"
);
const allInjected = await web3Enable('my dapp');
if (allInjected.length === 0) {
return;
}
const accounts = await web3Accounts();
console.log("accounts",accounts)
const account = accounts[0];
console.log("account",account)
const address = account?.address
const source = account?.meta?.source
console.log("address",address)
console.log("source",source)
setAddress(address);
setSource(source);
}
return (
まずは「web3Enable」を使い、ウォレットに対し、許可するか否かのポップアップを表示します。
そして、許可されたウォレットの情報を取得します。
ちなみに、ここでの「my dapp」とは、ポップアップに表示され、どのdappが許可を求めているのかがわかるようにするためのものです。
このように許可を求められました。
「Yes, allow this application access」を選択します。
すると、このように表示されました。
私の場合、「talisman」と「polkadot.js」が許可をしています。
次に重要なのが、「web3Accounts」です。
このようにアカウント情報を取得します。
今回は先頭のアカウント情報を取ってきました。
このように、私の場合は、６つのアカウントを持っていることがわかりました。
では、表示の部分です。
<div>
<button onClick={connectWallet}>Connect Wallet</button>
{address && <p>Address: {address}</p>}
{source && <p>Source: {source}</p>}
</div>
下のように、ボタンを押すと実行するようにしましょう。
このように、ボタンがあり、
押すと、このように情報を取得してくれました。
以上です。
Discussion