UnknownDetailsCard.tsx

import { TableCardBody } from '@components/common/TableCardBody';
import { ProgramField } from '@entities/instruction-card';
import { useScrollAnchor } from '@providers/scroll-anchor';
import { cn } from '@shared/utils';
import { TransactionInstruction } from '@solana/web3.js';
import React from 'react';

import getInstructionCardScrollAnchorId from '@/app/utils/get-instruction-card-scroll-anchor-id';

import { BaseRawDetails } from '../common/BaseRawDetails';

export function UnknownDetailsCard({
    index,
    ix,
    programName,
    innerCards,
}: {
    index: number;
    ix: TransactionInstruction;
    programName: string;
    innerCards?: React.ReactNode[];
}) {
    const hasInnerCards = innerCards && innerCards.length > 0;
    const [expanded, setExpanded] = React.useState(hasInnerCards ?? false);

    const scrollAnchorRef = useScrollAnchor(getInstructionCardScrollAnchorId([index + 1]));

    return (
        <div className="card" ref={scrollAnchorRef}>
            <div className={cn('card-header', !expanded && 'border-bottom-none')}>
                <h3 className="card-header-title mb-0 d-flex align-items-center">
                    <span className={`badge bg-info-soft me-2`}>#{index + 1}</span>
                    {programName} Instruction
                </h3>

                <button
                    className={cn('btn btn-sm d-flex', expanded ? 'btn-black active' : 'btn-white')}
                    onClick={() => setExpanded(e => !e)}
                >
                    {expanded ? 'Collapse' : 'Expand'}
                </button>
            </div>
            {expanded && (
                <TableCardBody>
                    <ProgramField programId={ix.programId} showExtendedInfo />
                    <BaseRawDetails ix={ix} />
                    {hasInnerCards && (
                        <>
                            <tr className="table-sep">
                                <td colSpan={3}>Inner Instructions</td>
                            </tr>
                            <tr>
                                <td colSpan={3}>
                                    <div className="inner-cards !e-m-0">{innerCards}</div>
                                </td>
                            </tr>
                        </>
                    )}
                </TableCardBody>
            )}
        </div>
    );
}