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);
}