14
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

nem / symbolAdvent Calendar 2022

Day 12

SSS Extensionを使って、SymbolブロックチェーンのWebウォレットを作ってみた

Last updated at Posted at 2022-12-11

皆さん SSS Extension 使ってますか?

Symboler の皆さんなら、一度は触った事ありますよね?

これホント便利なので、もっと多くの人に使って欲しいと思っています☺️

開発者のいなたつさんに感謝🙏✨

SSS Extensionと安全性について

SSS Extensionを用いることで、 Webアプリケーションに秘密鍵を持たせないことにより、Webアプリケーションから秘密鍵が漏洩することがなくなります。 しかし、SSSを信用する必要があります。SSSはChrome Web Storeに掲載するためにGoogleによる審査を経てリリースされていること、プログラムが全て公開されていること。をユーザーに信用してもらうための情報として提供します。

〜記事から引用〜


秘密鍵を意識しないでWebアプリが使えるのは、利用者にとっても、アプリ開発者にとっても助かりますね✨

※ SSS Extension は、現在ハードウェアウォレットにも対応しています✨
セキュリティをさらに強固にする為にハードウェアウォレットを使うのも有りですね☺️

いなたつさんの記事にもありましたが、どんなに対策しても100%安全という事はないので、必要最低限のXYMをアカウントに入れて利用すると安心かなと思います。

という事で、以下の記事を参考に、私も SSS Extention を利用したWebアプリに挑戦してみました。


開発者の皆さんからアドバイス頂きながら、作成したSymbolのWebウォレットはこちらです。

➡️  Ventus Wallet(ウェンタス ウォレット)
ラテン語でウェンタスと読みます。

Ventusについてはこちらをご覧ください。 
➡️   Ventusについて



はい。そうなんです。Ventusは、Mahoさんのアート作品です。
ウォレットのデザインにVentusを使用する許可をいただいて、
最初にVentus Walletを使っていただきました。
Mahoさんありがとうございます😊

それでは、早速ウォレットを見てみましょう。
まだ何も情報が表示されていませんね👀

スクリーンショット 2022-12-09 19.47.41.png

まず SSS Extension をインストールしてみましょう。

Google Chrome ブラウザで「SSS Extension」と検索します。

スクリーンショット 2022-12-03 14.36.04.png

Chromeに追加をクリックして拡張機能をインストールしてください。

スクリーンショット 2022-12-03 14.39.28.png

スクリーンショット 2022-12-03 14.42.41.png

インストールが出来たら、アカウントを追加しましょう。

今回は、アカウントを生成をクリックして、新しいアカウントを作ります。

スクリーンショット 2022-12-03 14.46.34.png

アドレスが生成されるので、Name と Password を任意で設定して Next を押します。

スクリーンショット 2022-12-09 18.57.07.png

アカウントを確認して Done を押すと登録されます。

スクリーンショット 2022-12-09 19.07.25.png

ウォレットの復元時に必要な、秘密鍵(PrivateKey)をバックアップしましょう。
アカウントの画面で目のマークをクリックしてパスワードを入力すると表示出来ます。

紙など安全な場所にメモして保管してください。
紛失した場合、このウォレットを復元出来なくなります。

スクリーンショット 2022-12-09 19.26.10.png

それでは、Ventus Wallet と SSS Extension を連携しましょう。
Chromeブラウザで、Ventus Wallet を開きます。

右クリックをして、メニューから、「Link to SSS」 をクリックします。
これで Webアプリケーション と SSS Extension が連携出来ます。

スクリーンショット 2022-12-09 19.54.28.png

リンクされると右下に
「Linked with SSS」
と表示されます。

表示されない場合は、ブラウザをリロードしてください。
Mac:   ⌘ + shift + R
Windows:  Ctrl + F5

※ SSS Extensionと連携したいWebアプリのドメインを、直接入力して登録する事も出来ます。
スクリーンショット 2022-12-12 10.40.12.png

Account Info にアドレスが表示されれば準備OKです。

スクリーンショット 2022-12-09 20.15.47.png

保管用としてではなく、普段使い用として少額での利用をオススメします。

作成したアカウント(アドレス)宛に、他のウォレットからXYMの送信を試してみてください。

(XYM以外のモザイクも送信可能です)

未承認トランザクションを検知すると、GIF画像がポップアップします。

トランザクションが承認されると、ブラウザが自動でリロードされ、Tx History に詳細が表示されます。

スクリーンショット 2022-12-09 20.24.54.png

メッセージを暗号化して送る事も出来ます。Encrypted message(暗号化) を選択して送信してください。

暗号化をする時と、トランザクションへの署名時の2回、SSS にてパスワードの入力が必要になります。

このウォレットでは、まだ暗号化メッセージの復号が出来ない為、デスクトップウォレットか、Arcana等で確認してください。(今後対応する予定です)

※追記  暗号化メッセージの復号が出来るようになりました。

と、ここまで MAIN NET でやってきましたが、Ventus Wallet は、TEST NET にも対応しています。
TEST NET のアカウントを SSS Extension に追加後に、ネットワーク設定を TEST NET に切り替える事で利用出来ます。

ネットワーク設定を切り替えたら、ブラウザをリロードしてください。
Mac:   ⌘ + shift + R
Windows:  Ctrl + F5

スクリーンショット 2022-12-03 16.24.16.png

TEST NET 利用時に必要な、テスト用のXYMは SYMBOL Faucet から取得してください。



このウォレットでは、まだモザイクやメッセージの送受信しか出来ませんが、
今後はモザイクの作成機能なんかも付けられたらいいなと思ってます☺️

最後に

Ventus Wallet のソースコードを置いておきます。

   ➡️ github

初心者なので、変なコードの書き方してるところもあるかもしれません。
もっとこう書いたらいいよとか、バグ等あればそっと教えてください☺️

こんな私でもウォレットが作れてしまう Symbol って凄いですね✨

もちろん、私だけの力ではなくて、分からない時は、nem Japan UserGroup の Discord で質問して教えてもらいました。

皆さんも、SSS Extension を使った Webアプリに挑戦してみませんか?💁‍♀️

参考文献

困った時はここ

行き詰まった時はここで質問すれば、開発者の皆さんが優しく教えてくれます☺️

14
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?