[Frontend] ホーム画面の取引履歴をSubgraphデータに接続

[yu23ki14]

一行説明

ホーム画面 (home.tsx) のダミートランザクションデータを `useTransfers` hookによるSubgraphの実データに置き換える

詳細

現在 `home.tsx` では取引履歴がハードコードされている:

const dummyTransactions = [
  { name: "りょうま", message: "草刈りありがとう！", ... },
  ...
];

対象ファイル

• packages/frontend/app/routes/home.tsx（変更）
• packages/frontend/app/hooks/useTransfers.ts（参照）

作業内容

1. dummyTransactions を削除

2. useTransfers hookで実データを取得

   import { useTransfers } from "~/hooks/useTransfers";
   
   const { data: transfers, isLoading } = useTransfers(3); // ホームは3件表示

3. ListRow に渡すデータを変換

   • Subgraphの Transfer 型から表示用データへの変換が必要
   • from.id → アドレス（NameStone API で名前解決するか、短縮アドレス表示）
   • totalAmount → formatUnits で表示用に変換
   • timestamp → 日付フォーマット

4. データなしの場合の表示

   • 「取引履歴がありません」等のメッセージ

要件

• dummyTransactions が削除されている
• Subgraphから実際の取引データを取得している
• 取引がない場合の空状態が表示される
• ローディング中の表示がある

補足

• 担当グループ: Group D（データ表示担当）
• [Frontend] ホーム画面のウォレット残高を実データに接続 #90 → このIssue → [Frontend] 取引一覧ページ(transactions.tsx)をSubgraphデータに接続 #92 の順に進む
• Subgraphが動いていない場合は空の配列が返る（エラーハンドリング注意）
• useTransfers は @tanstack/react-query を使用しているのでローディング/エラー状態が自動管理される