フロントエンド: ワークスペースホーム画面、メンバー一覧画面のコーディング

[yu23ki14]

ワークスペースホーム画面、メンバー一覧画面のコーディング

Description

ワークスペースホーム画面

/{tree_id}

• ログインユーザーの持っているロール一覧（詳細画面とアシストクレジット分配画面への導線）
• ワークスペースに紐づくすべてのロール一覧（詳細画面とロール新規作成画面への導線）
• ユーザー所有のロール一覧とワークスペース全体のロール一覧を取得するhooksを追加

メンバー一覧画面

/{tree}/member

• 各メンバーの情報（アイコン、名前、省略アドレス）
• ロールは持っていないが、FractionTokenを持っているメンバーも表示
• 持っているロールタグ
• コントリビューション（TBD）
  • 何らかの形でコントリビューションのランクを出したい

Notes

Screenshots

[yu23ki14]

@aowheel
/{treeId} でプロジェクトのHatsが見れるようになるところだけやりました。
http://localhost:5173/666 とかにアクセスしてもらえると。

/app/routes/$treeId.tsx を見ていただいたらわかると思いますが、hatsオブジェクトの中にあるimageUriとdetailsプロパティ（ipfs）をhttpsに変換して、childrenで渡してあるコンポーネントにimageUriとdetailで変換後のデータを渡すような構成にしています。