SolidityとEthereumによる実践スマートコントラクト開発 ―Truffle Suiteを用いた開発の基礎からデプロイまで

11章Fundraiser UIを完成させる

　本章では、前章で作成した新しいWeb3アプリケーションに引き続き取り組む。各Fundraiserインスタンスに関する情報をさらに追加することで、ユーザーがFundraiserインスタンスをクリックしたときに情報をさらに確認できるようにする。そして、寄付に対して領収書を発行する機能も追加する。

　また、このアプリケーションを使ってイーサを受け取れるようにすれば、ユーザーがFundraiserインスタンスに資金を送金し、コントラクトとやり取りできるようになる。ここでは、その方法についても説明する。

　まず、各Fundraiserインスタンスの詳細情報を表示する。各インスタンスの詳細がわかれば、寄付をする側はFundraiserを選びやすくなるし、Fundraiserを作成する側も寄付を募りやすくなる。

11.1　各Fundraiserの詳細情報を追加する

　次の課題は、各Fundraiserに関する詳細情報をユーザーに表示することである。Material-UIのダイアログを使ってユーザーが個々のFundraiserをクリックできるようにし、ポップアップに表示された情報をすぐに確認できるようにする。ダイアログが表示されると、ユーザーが寄付の金額をクリックしたり、Fundraiserに関する詳しい情報を確認できるようになる。また、ダイアログをすぐに閉じることもできる。だがその前に、正しいFundraiserを開くボタンを作成する必要がある。

　FundraiserCard.jsファイルのimport文の最後にリスト11-1のコードを追加する。これにより、Material-UIから必要なボタンがインポートされ、Material-UIが提供するデフォルトのスタイルが適用される。 ...