💰
Megapot
  • Overview
    • About Megapot
    • How to play
    • How to provide liquidity
    • How to refer users
    • Earn as a liquidity provider
    • About the Team
    • Megapoints
  • Deep dive
    • Components
    • System Diagram
    • Smart Contract
    • Provably Fair
  • Developers
    • Start Here
    • React UI Kit (Beta)
      • MegapotProvider
      • Jackpot
      • useJackpot
    • Standalone Integration
      • Getting Started
      • Contract Functions
      • Jackpot Page
      • LP Deposit Page
      • History Page
    • Custom ERC-20 Jackpot
  • Developer Reference
    • Testnet & Mainnet
    • Contract Overview & Functions
    • Megapot API
    • Megapot Examples
      • Refer Tickets
      • Gifting Tickets
    • Brand Kit
  • Appendix
    • VIP Program
    • FAQ
    • About Megapot
  • Terms of Service
  • Privacy Policy
  • Responsible Gaming
Powered by GitBook
On this page
  • History Page
  • History Component
  • User Purchase History
  • API Route
  1. Developers
  2. Standalone Integration

History Page

PreviousLP Deposit PageNextCustom ERC-20 Jackpot

Last updated 1 month ago

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 or view the live demo .

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