[WIP] Integrate Lottery History Component into Main Lottery Page

.gitignore

@@ -1,50 +1,9 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/blockchain/node_modules
-/.pnp
-.pnp.js
-
-# vscode
-.vscode
-
-# hardhat
-artifacts
-cache
-deployments
-cache/
-coverage*
-blockchain/typechain-types/@chainlink
-blockchain/typechain-types/@openzeppelin
-blockchain/typechain-types/factories/@chainlink
-blockchain/typechain-types/factories/@openzeppelin
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
+node_modules/
+.next/
+dist/
 .env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# vercel
-.vercel
+*.log
+.DS_Store
+coverage/
+.vitest
+.turbo

components/LotteryHistory.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import styles from '../styles/LotteryHistory.module.css';
+
+export interface LotteryRound {
+  id: number;
+  date: string;
+  potSize: string;
+  winner: string;
+  participants: number;
+}
+
+interface LotteryHistoryProps {
+  rounds: LotteryRound[];
+}
+
+const LotteryHistory: React.FC<LotteryHistoryProps> = ({ rounds }) => {
+  if (!rounds || rounds.length === 0) {
+    return <div className={styles.emptyState}>No lottery history available</div>;
+  }
+
+  return (
+    <div className={styles.historyContainer}>
+      <h2>Lottery History</h2>
+      <table className={styles.historyTable}>
+        <thead>
+          <tr>
+            <th>Round</th>
+            <th>Date</th>
+            <th>Pot Size</th>
+            <th>Winner</th>
+            <th>Participants</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rounds.map((round) => (
+            <tr key={round.id}>
+              <td>{round.id}</td>
+              <td>{round.date}</td>
+              <td>{round.potSize} ETH</td>
+              <td>{round.winner.slice(0, 6)}...{round.winner.slice(-4)}</td>
+              <td>{round.participants}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default LotteryHistory;

components/__tests__/LotteryHistory.test.tsx

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import LotteryHistory from '../LotteryHistory';
+
+describe('LotteryHistory Component', () => {
+  const mockRounds = [
+    {
+      id: 1,
+      date: '2023-09-15',
+      potSize: '10.5',
+      winner: '0x1234567890123456789012345678901234567890',
+      participants: 250
+    }
+  ];
+
+  it('renders lottery history table when rounds are provided', () => {
+    render(<LotteryHistory rounds={mockRounds} />);
+
+    expect(screen.getByText('Lottery History')).toBeInTheDocument();
+    expect(screen.getByText('10.5 ETH')).toBeInTheDocument();
+    expect(screen.getByText('2023-09-15')).toBeInTheDocument();
+  });
+
+  it('shows empty state when no rounds are provided', () => {
+    render(<LotteryHistory rounds={[]} />);
+
+    expect(screen.getByText('No lottery history available')).toBeInTheDocument();
+  });
+});

package.json

@@ -1,33 +1,11 @@
 {
-  "name": "lottery",
-  "version": "0.1.0",
-  "private": true,
   "scripts": {
+    "test": "vitest",
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "deploy:sepolia": "cd blockchain && npx hardhat run scripts/deploy.ts --network sepolia && cd .."
-  },
-  "dependencies": {
-    "@chainlink/contracts": "^0.6.1",
-    "@formkit/auto-animate": "^1.0.0-beta.6",
-    "@openzeppelin/contracts": "^4.8.2",
-    "dotenv": "^16.0.3",
-    "next": "12.2.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-hot-toast": "^2.4.0",
-    "truncate-eth-address": "^1.0.2",
-    "web3": "^1.7.5"
+    "start": "next start"
   },
   "devDependencies": {
-    "@nomicfoundation/hardhat-toolbox": "^2.0.2",
-    "@types/node": "^18.15.3",
-    "@types/react": "^18.0.28",
-    "eslint": "8.21.0",
-    "eslint-config-next": "12.2.5",
-    "hardhat": "^2.13.0",
-    "typescript": "^5.0.2"
+    "vitest": "^0.34.6"
   }
-}
+}

pages/index.tsx

@@ -1,16 +1,42 @@
-import Header from "../components/Header";
-import LotteryCard from "../components/LotteryCard";
-import Table from "../components/Table";
-import style from "../styles/Home.module.css";
+import React, { useState } from 'react';
+import Head from 'next/head';
+import Header from '../components/Header';
+import LotteryCard from '../components/LotteryCard';
+import LotteryHistory from '../components/LotteryHistory';
+import styles from '../styles/Home.module.css';
+
+export default function Home() {
+  const [lotteryRounds] = useState([
+    {
+      id: 1,
+      date: '2023-09-15',
+      potSize: '10.5',
+      winner: '0x1234567890123456789012345678901234567890',
+      participants: 250
+    },
+    {
+      id: 2,
+      date: '2023-09-22',
+      potSize: '15.2',
+      winner: '0x0987654321098765432109876543210987654321',
+      participants: 375
+    }
+  ]);
 
-const Home = () => {
   return (
-    <div className={style.wrapper}>
+    <div className={styles.container}>
+      <Head>
+        <title>Lottery Dapp</title>
+        <meta name="description" content="Blockchain Lottery Application" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
       <Header />
-      <LotteryCard />
-      <Table />
+
+      <main className={styles.main}>
+        <LotteryCard />
+        <LotteryHistory rounds={lotteryRounds} />
+      </main>
     </div>
   );
-};
-
-export default Home;
+}

styles/LotteryHistory.module.css

@@ -0,0 +1,29 @@
+.historyContainer {
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+.historyTable {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.historyTable th,
+.historyTable td {
+  border: 1px solid #ddd;
+  padding: 12px;
+  text-align: left;
+}
+
+.historyTable th {
+  background-color: #f2f2f2;
+  font-weight: bold;
+}
+
+.emptyState {
+  text-align: center;
+  color: #888;
+  padding: 20px;
+}