IdlCard.tsx

'use client';
import { getIdlVersion, isIdlProgramIdMismatch, type SupportedIdl, useAnchorProgram } from '@entities/idl';
import { useProgramMetadataIdl } from '@entities/program-metadata';
import { useCluster } from '@providers/cluster';
import { Badge } from '@shared/ui/badge';
import { cn } from '@shared/utils';
import { useEffect, useMemo, useState } from 'react';
import { AlertTriangle, ExternalLink } from 'react-feather';

import { clusterSlug } from '@/app/utils/cluster';

import { BaseWarningCard } from '../interactive-idl/ui/BaseWarningCard';
import { IdlVariant, useIdlLastTransactionDate } from '../model/use-idl-last-transaction-date';
import { IdlInstructionSection } from './IdlInstructionSection';
import { IdlSection } from './IdlSection';

type IdlTab = {
    id: IdlVariant;
    idl: SupportedIdl;
    title: string;
    badge: string;
};

export function IdlCard({ programId }: { programId: string }) {
    const { url, cluster } = useCluster();
    const network = clusterSlug(cluster);
    const { idl } = useAnchorProgram(programId, url, cluster);
    const { programMetadataIdl } = useProgramMetadataIdl(programId, url, cluster);
    const [activeTabIndex, setActiveTabIndex] = useState<number>();
    const [searchStr, setSearchStr] = useState<string>('');

    const preferredIdlVariant = useIdlLastTransactionDate(programId, Boolean(idl), Boolean(programMetadataIdl));

    const tabs = useMemo<IdlTab[]>(() => {
        const idlTabs: IdlTab[] = [];

        // Add pmpTab first (default)
        if (programMetadataIdl) {
            idlTabs.push({
                badge: 'Program Metadata IDL',
                id: IdlVariant.ProgramMetadata,
                idl: programMetadataIdl,
                title: 'Program Metadata',
            });
        }

        // Optionally add anchor tab
        if (idl) {
            const anchorTab: IdlTab = {
                badge: 'Anchor IDL',
                id: IdlVariant.Anchor,
                idl: idl,
                title: 'Anchor',
            };
            // If anchor is preferred, put it first
            if (preferredIdlVariant === IdlVariant.Anchor) {
                idlTabs.unshift(anchorTab);
            } else {
                idlTabs.push(anchorTab);
            }
        }

        return idlTabs;
    }, [idl, programMetadataIdl, preferredIdlVariant]);

    useEffect(() => {
        // Activate first tab when tabs are available
        if (tabs.length > 0 && activeTabIndex === undefined) {
            setActiveTabIndex(0);
        }
    }, [tabs, activeTabIndex]);

    if (tabs.length === 0 || activeTabIndex === undefined) {
        return (
            <div className="card">
                <div className="card-header">
                    <h4 className="card-header-title">Program IDL</h4>
                </div>
                <div className="card-body">
                    <div className="e-mb-6 e-flex e-items-center e-gap-2 e-text-destructive">
                        <AlertTriangle size={16} />
                        <span>
                            This program doesn&apos;t have an IDL yet. If you&apos;re the developer, upload it using the
                            instructions below.
                        </span>
                    </div>

                    <div className="e-space-y-6">
                        <IdlInstructionSection
                            title="Upload IDL"
                            description="Use this command to upload generated idl in JSON format"
                            commands={['npx @solana-program/program-metadata@latest write idl $PROGRAM_ID ./idl.json']}
                        />

                        <div className="e-flex e-items-center e-justify-between">
                            <span>In case you want to upload IDL with a multisig, follow the documentation.</span>
                            <a
                                href="https://github.com/solana-program/program-metadata?tab=readme-ov-file#commands"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="btn btn-outline-primary btn-sm e-whitespace-nowrap"
                            >
                                Full documentation
                                <ExternalLink className="align-text-top ms-2" size={13} />
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    const activeTab = tabs[activeTabIndex];
    const isMismatch = isIdlProgramIdMismatch(activeTab.idl, programId);

    return (
        <div className="card">
            <div className="card-header">
                <div className="nav nav-tabs e-border-0" role="tablist">
                    {tabs
                        .filter(tab => tab.idl)
                        .map(tab => (
                            <button
                                key={tab.title}
                                className={cn('nav-item nav-link', {
                                    active: tab.id === activeTab?.id,
                                })}
                                onClick={() => {
                                    setActiveTabIndex(tabs.findIndex(t => t.id === tab.id));
                                    setSearchStr('');
                                }}
                            >
                                {tab.title}
                            </button>
                        ))}
                </div>
            </div>
            <div className="card-body">
                {isMismatch ? (
                    <BaseWarningCard
                        message="IDL Program ID Mismatch"
                        description="The program address in this IDL does not match the program being viewed. The IDL content is hidden to prevent interaction with a potentially fraudulent IDL."
                    />
                ) : (
                    <IdlSection
                        badge={
                            <Badge
                                size="xs"
                                variant={getIdlVersion(activeTab.idl) === 'Legacy' ? 'destructive' : 'success'}
                            >
                                {getIdlVersion(activeTab.idl)} {activeTab.badge}
                            </Badge>
                        }
                        idl={activeTab.idl}
                        idlSource={activeTab.id}
                        network={network}
                        programId={programId}
                        searchStr={searchStr}
                        onSearchChange={setSearchStr}
                    />
                )}
            </div>
        </div>
    );
}