thirdwebのlocalwalletは内部で何をしているのか？
thirdwebのlocalwalletとは？
そもそもthirdwebとは、スマートコントラクトなどブロックチェーンに関係するコードを簡単に作れるような開発キットを提供しているサービスです。
そのthirdwebが、localwalletというDappsに組み込める「ウォレットを簡単に作れる機能」を提供しています。
localwalletを使ってみた
百聞は一見にしかずということで、まずはUIを見てみましょう。
詳しくは次章で説明しますが、thirdwebのlocalwalletを設定すると上のような"contine as a guest"というリンクがフロントで表示されます。
そのリンクをクリックすると、以下のようなパスワードを入力する画面が出てきます。
上記の画面でパスワードを入力するだけで、自分のウォレットが作れてしまいます。
また、一回ウォレットの接続を切ってもう一回先ほどのウォレットでログインしようとしたら、再度パスワードの入力が求められます。
はい、これでメタマスクなどのウォレットをインストールしていないユーザーでも、自分のウォレットを即座に作りDappsを使えるようになりました。これまで必死にメタマスクを持っていないユーザーにDappsを使ってもらうにはどうするか考えていましたが、localwalletが解決してくれます。すごい。
localwalletを実装するためのコード
では、上記のthirdwebのlocalwalletを実装するためのコードを、Reactで見てみましょう。 上記を参考にしたコードを紹介します。
import { ThirdwebProvider, localWallet } from "@thirdweb-dev/react";
// ----細かいコードは省略----
return (
<ThirdwebProvider
supportedWallets={[localWallet()]}
>
// Connectボタンを置くなど
<button>connectボタン</button>
</ThirdwebProvider>
)
これでOKです。従来、connectwalletボタンを実装していた部分に上記のコードを埋め込めば、設定完了です。
内部で何が行われているのがgithubを見る
ここまで来て私は「めっちゃ簡単じゃん！でもこれどうなってんの？」と思い、thirdwebのgithubを調べました。
npmjs.comでthirdweb-dev/reactを調べたら以下のgithubが載ってたのでそちらをみます。
ローカルにインストールしたthirdweb-dev/reactと上記のgithubのファイルを照らし合わせた結果、以下のgithubリンクにlocalwalletのコードがまとまっていました。
具体的なコード(generate関数)
結論としては、thirdwebのlocalwalletを作成するときには、ether.jsのwalletを生成する関数を利用しています。以下のgenerateという関数です。
上記のgenerate関数は、調べたところLocalWalletというクラスのメソッドの1つでした。
先ほど貼ったgithubのlocalWalletディレクトリの中にあるCreateLocalWallet.tsxを見ると、CreateLocalWallet_Guestという関数があります。
この関数がlocalwalletを作るときに呼び出されているようです。そして先ほどのgenerate関数が叩かれランダムな32バイトの秘密鍵とアドレスが生成されていますね。
ちなみに、CreateLocalWallet_Guest関数の中で使われているuseLocalWalletInfoというhooksは以下です。
パスワードとlocalwalletのアドレスの紐付け
では、生成したlocalwalletとパスワードはどのように紐づけているのでしょうか？？
最初にお見せしたパスワードを打ち込む画面のUIは、以下のCreateLocalWallet_Password関数の部分で定義されています。
CreateLocalWallet_Passwordの中に、handleConnectという関数があり、パスワードを入力するとこの関数は走ります。
そして、handleConnectの中にあるlocalWallet.saveという部分でパスワードをencryptした状態で保存しています。
パスワードを再入力して、ログインするとき
以下のReconnectLocalWallet.tsxファイルのhandleReconnect関数の中にlocalWallet.loadという関数があります。
これは、内部的には以下の写真のコード部分を行っています。
このようにして、アドレスを取得しているみたいです。
Discussion