History Page
This example will guide you through displaying the user's purchase history.
This references our Jackpot Demo Integration Github Repo. You can find the code for the demo integration here or view the live demo here.
History Page
This is the entry point for the history page.
// /app/history/page.tsx
import { HistoryComponent } from '@/components/history-component';
export default function HistoryPage() {
return <HistoryComponent />;
}
History Component
This component will display the user's purchase history.
// /app/components/history-component.tsx
'use client';
import { useAccount } from 'wagmi';
import { UserPurchaseHistory } from './history-components/user-purchase-history';
export function HistoryComponent() {
const { address, isConnected } = useAccount();
return (
<>
{isConnected && address ? (
<UserPurchaseHistory address={address} />
) : (
<div className="pb-6">
<p className="text-lg text-center text-emerald-500">
Connect wallet to view your purchase history
</p>
</div>
)}
</>
);
}
User Purchase History
This component will display the user's purchase history.
// /app/components/history-components/user-purchase-history.tsx
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { Card, CardContent } from '../ui/card';
type UserPurchaseHistory = {
userAddress: string;
ticketsPurchased: number;
blockNumber: number;
transactionHash: string;
};
export function UserPurchaseHistory({ address }: { address: string }) {
const [userPurchaseHistory, setUserPurchaseHistory] = useState<
UserPurchaseHistory[] | []
>([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchUserPurchaseHistory = async () => {
const response = await fetch('/api/user-purchase-history', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
address: address,
}),
});
const data = await response.json();
// Reset the user purchase history
setUserPurchaseHistory([]);
data.forEach((event: any) => {
const userAddress = `0x${event.topics[1].substring(26, 66)}`;
const ticketsPurchased =
parseInt(event.data, 16) / 10000 / ((100 - 30) / 100);
const blockNumber = parseInt(event.blockNumber, 16);
const transactionHash = event.transactionHash;
setUserPurchaseHistory((prev) => [
...prev,
{
userAddress,
ticketsPurchased,
blockNumber,
transactionHash,
},
]);
});
setIsLoading(false);
};
fetchUserPurchaseHistory();
}, [address]);
return (
<Card className="bg-white rounded-xl shadow-sm">
<CardContent className="p-6">
<div className="flex flex-col items-center justify-center">
<h2 className="text-lg font-medium text-gray-500 mb-2">
Purchase History
</h2>
{userPurchaseHistory.length > 0 && !isLoading ? (
<>
{userPurchaseHistory.map((purchase) => (
<div
key={purchase.transactionHash}
className="flex flex-col w-full border-b border-gray-200"
>
<div className="flex justify-between w-full">
<p className="text-lg text-emerald-500">
Tickets Purchased:
</p>
<p className="text-lg text-emerald-500">
{purchase.ticketsPurchased}
</p>
</div>
<div className="flex justify-between w-full">
<p className="text-lg text-emerald-500">
Block:
</p>
<p className="text-lg text-emerald-500">
{purchase.blockNumber}
</p>
</div>
<div className="flex justify-between w-full">
<p className="text-lg text-emerald-500">
Tx Hash:
</p>
<p className="text-lg text-blue-500">
<Link
target="_blank"
href={`https://basescan.org/tx/${purchase.transactionHash}`}
>
BaseScan Tx
</Link>
</p>
</div>
</div>
))}
</>
) : userPurchaseHistory.length === 0 && !isLoading ? (
<p className="text-lg">No purchase history found</p>
) : (
<p className="text-lg">Loading...</p>
)}
</div>
</CardContent>
</Card>
);
}
API Route
This API route will fetch the user's purchase history from the contract using BaseScan's API.
// /app/api/user-purchase-history.ts
import { CONTRACT_ADDRESS, CONTRACT_START_BLOCK, PURCHASE_TICKET_TOPIC } from '@/lib/constants';
import { NextRequest, NextResponse } from 'next/server';
export async function POST(request: NextRequest) {
const { address } = await request.json();
const urlParams = new URLSearchParams({
module: 'logs',
action: 'getLogs',
address: CONTRACT_ADDRESS,
topic0: PURCHASE_TICKET_TOPIC,
apikey: process.env.BASESCAN_API_KEY || '',
fromBlock: CONTRACT_START_BLOCK.toString(),
});
const response = await fetch(
`https://api.basescan.org/api?${urlParams.toString()}`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
}
);
const data = await response.json();
// filter through the data for user address
const userPurchaseHistory = data.result.filter(
(log: any) =>
`0x${log.topics[1].substring(26, 66).toLowerCase()}` ===
address.toLowerCase()
);
return NextResponse.json(userPurchaseHistory);
}
Last updated