[Astar]コントラクト備忘録47（Polkadot.jsを使って、メッセージの署名を行おう！）

本日は、「Polkadot.js」を用いて、メッセージの署名を行ってみましょう。

https://polkadot.js.org/docs/extension/cookbook#sign-a-message

こちらを使っていきます。

https://polkadot.js.org/docs/extension/cookbook#sign-a-message

コードの前半はこちらになります。

ここは前回のウォレット接続の部分と基本的には同じです。

import React, { useState } from 'react';
import { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
import { stringToHex } from "@polkadot/util";

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  const [address, setAddress] = useState('');
  const [source, setSource] = useState('');
  const [account, setAccount] = useState<InjectedAccountWithMeta | null>(null);;
  const [signature, setSignature] = 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];
    setAccount(account);
    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);
  }

前回と違うのはこの辺りです。

今回は、「account」情報を他の関数で使いたいので、関数コンポーネントに保存しました。

そして、型が、「@polkadot/extension-inject/types」の「InjectedAccountWithMeta」になります。

確かに見てみると、「meta」という情報を含んでいます。

そして、後半のコードがこちらです。

こちらが今回のテーマになります。

async function signMessage () {
    const { web3FromSource} = await import(
      "@polkadot/extension-dapp"
    );
    if (account) {
      const injector = await web3FromSource(account.meta.source);
      console.log("injector",injector)

      const signRaw = injector?.signer?.signRaw;
      console.log("signRaw",signRaw)

      if (!!signRaw) {
        // after making sure that signRaw is defined
        // we can use it to sign our message
        const { signature } = await signRaw({
            address: account.address,
            data: stringToHex('message to sign'),
            type: 'bytes'
        });
        console.log("signature",signature)
        setSignature(signature);
      }
    }
  }

accountが存在する場合、「web3FromSource」を使い、「injector」を取得しています。

「injector」の中身は下のようになっています。

そして、「injector」の中のsigner.signRawを用いて署名を作成しています。

ちなみに参考までに、表示部分は下のようになっています。

 <div>
            <button onClick={connectWallet}>Connect Wallet</button>
            {address && <p>Address: {address}</p>}
            {source && <p>Source: {source}</p>}

            <button onClick={signMessage} style={{marginTop: "20px"}}>sign a message</button>
            {signature && <p>Signature: {signature}</p>}
          </div>

では、こちらのボタンを押してみましょう。

このようにポップアップが立ち上がり、

署名を作成することができました！

今回は以上です。