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

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

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

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


開発者の[いなたつさん](https://twitter.com/_inatatsu_csg_)に感謝🙏✨

https://zenn.dev/inatatsu/articles/51c1d8de76d335

https://qiita.com/inatatsu_csg/items/40ddd7cb5d566a7d8ae9?utm_campaign=post_article&utm_medium=twitter&utm_source=twitter_share




# SSS Extensionと安全性について


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

[〜記事から引用〜](https://zenn.dev/inatatsu/articles/51c1d8de76d335)

***


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



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

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


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


https://qiita.com/inatatsu_csg/items/191edf3bcd1f0acf15c1

***

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

➡️ 　[Ventus Wallet(ウェンタス ウォレット)](https://ventus-wallet.net/)
ラテン語でウェンタスと読みます。

Ventusについてはこちらをご覧ください。　
➡️ 　 [Ventusについて](https://note.com/mahorobart/n/nd5f226887c2a)

<br>
<br>


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




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


![スクリーンショット 2022-12-09 19.47.41.png](https://user-images.githubusercontent.com/45915246/206705854-3e648515-34b5-47e4-a094-a1b5ebf08e8a.png)

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

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

![スクリーンショット 2022-12-03 14.36.04.png](https://user-images.githubusercontent.com/45915246/206705817-8d61c61a-c8c6-43c2-b342-6ff8652f89b6.png)

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

![スクリーンショット 2022-12-03 14.39.28.png](https://user-images.githubusercontent.com/45915246/206705841-02a03bbb-41f3-4f4b-ac18-ddfa177a1fa6.png)

![スクリーンショット 2022-12-03 14.42.41.png](https://user-images.githubusercontent.com/45915246/206705847-d944b595-10fa-41bf-9dbe-4fde3afe70a8.png)

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

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


![スクリーンショット 2022-12-03 14.46.34.png](https://user-images.githubusercontent.com/45915246/206705878-1ed23890-7d06-4b9b-bc26-0810c934c099.png)

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

![スクリーンショット 2022-12-09 18.57.07.png](https://user-images.githubusercontent.com/45915246/206705834-ec607b22-d609-4a1a-b3a2-2fee89f4b870.png)


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

![スクリーンショット 2022-12-09 19.07.25.png](https://user-images.githubusercontent.com/45915246/206705890-6bc25a4c-b190-4bfe-8d34-493156758a8e.png)


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

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

![スクリーンショット 2022-12-09 19.26.10.png](https://user-images.githubusercontent.com/45915246/206705875-c54faff5-b82e-4305-a0da-96dbd2ae51a7.png)


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

https://ventus-wallet.net/

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

![スクリーンショット 2022-12-09 19.54.28.png](https://user-images.githubusercontent.com/45915246/206705879-a252b9e4-dbc9-41ec-8c18-15bcf507c476.png)


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

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


**※ SSS Extensionと連携したいWebアプリのドメインを、直接入力して登録する事も出来ます。**
![スクリーンショット 2022-12-12 10.40.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408917/b0233e19-7424-7831-1507-493294c2594b.png)


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

![スクリーンショット 2022-12-09 20.15.47.png](https://user-images.githubusercontent.com/45915246/206705867-cb780d6a-4c98-4a9d-b801-5762af8ed7f0.png)


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


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

（XYM以外のモザイクも送信可能です）

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

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

![スクリーンショット 2022-12-09 20.24.54.png](https://user-images.githubusercontent.com/45915246/206705895-6aa17ee6-52c2-4485-abf8-dc8f3d7af487.png)


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

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

![](https://user-images.githubusercontent.com/45915246/206705991-9e6697f9-1c26-4e86-b295-cdb5ba1297e6.png)


~~このウォレットでは、まだ暗号化メッセージの復号が出来ない為、[デスクトップウォレット](https://github.com/symbol/desktop-wallet/releases)か、[Arcana](https://note.com/babymoney721/n/n4120d75488f9)等で確認してください。（今後対応する予定です）~~


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

https://twitter.com/mikunNEM/status/1606093934265892866?s=20&t=P8KuvrY3SK_vCsg7WvvFCg





と、ここまで　**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](https://user-images.githubusercontent.com/45915246/206706044-fd845663-db72-41fa-90f2-e08d4e7a6f39.png)


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

https://testnet.symbol.tools

<br>
<br>

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


# 最後に

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

　　　➡️　[**github**](https://github.com/mikunNEM/Ventus_Wallet)

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


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


もちろん、私だけの力ではなくて、分からない時は、[**nem Japan UserGroup**](https://discord.gg/F5DQjgHBGw) の Discord で質問して教えてもらいました。


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




# 参考文献

https://github.com/xembook/quick_learning_symbol

https://qiita.com/nem_takanobu/items/4f50e5740318d92d7dcb

https://qiita.com/inatatsu_csg/items/191edf3bcd1f0acf15c1

https://docs.sss-symbol.com/ja/



# 困った時はここ

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



https://discord.gg/F5DQjgHBGw