Skip to content

feat: show/hide cu profiling #925

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
C0mberry wants to merge 5 commits into
base: master
Choose a base branch
from
Open

feat: show/hide cu profiling #925

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8a71dba
collapse card
C0mberry Apr 6, 2026
23b10a4
chore: build info
C0mberry Apr 7, 2026
372329f
resolve comments
C0mberry Apr 13, 2026
81cb54e
build info
C0mberry Apr 14, 2026
a8170dd
reload tests
C0mberry Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 64 additions & 70 deletions app/components/common/BaseInstructionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Address } from '@components/common/Address';
import { useScrollAnchor } from '@providers/scroll-anchor';
import { CollapsibleCard } from '@shared/ui/collapsible-card';
import { cn } from '@shared/utils';
import { ParsedInstruction, SignatureResult, TransactionInstruction } from '@solana/web3.js';
import getInstructionCardScrollAnchorId from '@utils/get-instruction-card-scroll-anchor-id';
Expand Down Expand Up @@ -46,7 +47,6 @@ export function BaseInstructionCard({
}: InstructionProps) {
const [resultClass] = ixResult(result, index);
const [showRaw, setShowRaw] = React.useState(defaultRaw || false);
const [expanded, setExpanded] = React.useState(true);
const rawClickHandler = () => {
if (!defaultRaw && !showRaw && !raw) {
// trigger handler to simulate behaviour for the InstructionCard for the transcation which contains logic in it to fetch raw transaction data
Expand All @@ -59,93 +59,87 @@ export function BaseInstructionCard({
getInstructionCardScrollAnchorId(childIndex != null ? [index + 1, childIndex + 1] : [index + 1]),
);
return (
<div className="card" ref={scrollAnchorRef}>
<div className="card-header">
<h3 className="card-header-title mb-0 d-flex align-items-center">
<CollapsibleCard
ref={scrollAnchorRef}
collapsible={collapsible}
title={
<>
<span className={`badge bg-${resultClass}-soft me-2`}>
#{index + 1}
{childIndex !== undefined ? `.${childIndex + 1}` : ''}
</span>
{title}
</h3>

</>
}
headerButtons={
<div className="d-flex align-items-center gap-2">
{headerButtons}
{collapsible && (
<button
className="btn btn-sm d-flex align-items-center btn-white"
onClick={() => setExpanded(v => !v)}
>
{expanded ? 'Collapse' : 'Expand'}
</button>
)}
<button
disabled={defaultRaw || !expanded}
disabled={defaultRaw}
className={cn(
'btn btn-sm d-flex align-items-center',
showRaw ? 'btn-black active' : 'btn-white',
(defaultRaw || !expanded) && '!e-pointer-events-auto e-cursor-not-allowed',
defaultRaw && '!e-pointer-events-auto e-cursor-not-allowed',
)}
onClick={rawClickHandler}
>
<Code className="me-2" size={13} /> Raw
</button>
</div>
}
>
<div className="table-responsive mb-0">
<table className="table table-sm table-nowrap card-table">
<tbody className="list">
{showRaw ? (
<>
<tr>
<td>Program</td>
<td className="text-lg-end">
<Address pubkey={ix.programId} alignRight link />
</td>
</tr>
{'parsed' in ix ? (
<BaseRawParsedDetails ix={ix}>
{raw ? <BaseRawDetails ix={raw} /> : null}
</BaseRawParsedDetails>
) : (
<BaseRawDetails ix={ix} />
)}
</>
) : (
children
)}
{innerCards && innerCards.length > 0 && (
<>
<tr className="table-sep">
<td colSpan={3}>Inner Instructions</td>
</tr>
<tr>
<td colSpan={3}>
{/* !e-m-0 overrides the 1.5rem margin from inner-cards
so the card aligns with the "Inner Instructions" label above */}
<div className="inner-cards !e-m-0">{innerCards}</div>
</td>
</tr>
</>
)}
{eventCards && eventCards.length > 0 && (
<>
<tr className="table-sep">
<td colSpan={3}>Events</td>
</tr>
<tr>
<td colSpan={3}>
<div className="inner-cards">{eventCards}</div>
</td>
</tr>
</>
)}
</tbody>
</table>
</div>
{expanded && (
<div className="table-responsive mb-0">
<table className="table table-sm table-nowrap card-table">
<tbody className="list">
{showRaw ? (
<>
<tr>
<td>Program</td>
<td className="text-lg-end">
<Address pubkey={ix.programId} alignRight link />
</td>
</tr>
{'parsed' in ix ? (
<BaseRawParsedDetails ix={ix}>
{raw ? <BaseRawDetails ix={raw} /> : null}
</BaseRawParsedDetails>
) : (
<BaseRawDetails ix={ix} />
)}
</>
) : (
children
)}
{innerCards && innerCards.length > 0 && (
<>
<tr className="table-sep">
<td colSpan={3}>Inner Instructions</td>
</tr>
<tr>
<td colSpan={3}>
{/* !e-m-0 overrides the 1.5rem margin from inner-cards
so the card aligns with the "Inner Instructions" label above */}
<div className="inner-cards !e-m-0">{innerCards}</div>
</td>
</tr>
</>
)}
{eventCards && eventCards.length > 0 && (
<>
<tr className="table-sep">
<td colSpan={3}>Events</td>
</tr>
<tr>
<td colSpan={3}>
<div className="inner-cards">{eventCards}</div>
</td>
</tr>
</>
)}
</tbody>
</table>
</div>
)}
</div>
</CollapsibleCard>
);
}

Expand Down
24 changes: 16 additions & 8 deletions app/components/common/InspectorInstructionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { ProgramField } from '@entities/instruction-card';
import { useScrollAnchor } from '@providers/scroll-anchor';
import { CollapsibleCard } from '@shared/ui/collapsible-card';
import { cn } from '@shared/utils';
import { ParsedInstruction, SignatureResult, TransactionInstruction, VersionedMessage } from '@solana/web3.js';
import getInstructionCardScrollAnchorId from '@utils/get-instruction-card-scroll-anchor-id';
Expand Down Expand Up @@ -54,24 +55,31 @@ export function InspectorInstructionCard({
);

return (
<div className="card" ref={scrollAnchorRef}>
<div className="card-header">
<h3 className="card-header-title mb-0 d-flex align-items-center">
<CollapsibleCard
ref={scrollAnchorRef}
title={
<>
<span className={`badge bg-${resultClass}-soft me-2`}>
#{index + 1}
{childIndex !== undefined ? `.${childIndex + 1}` : ''}
</span>
{title}
</h3>

</>
}
headerButtons={
<button
disabled={defaultRaw}
className={cn('btn btn-sm d-flex align-items-center', showRaw ? 'btn-black active' : 'btn-white')}
className={cn(
'btn btn-sm d-flex align-items-center',
showRaw ? 'btn-black active' : 'btn-white',
defaultRaw && '!e-pointer-events-auto e-cursor-not-allowed',
)}
onClick={rawClickHandler}
>
<Code className="me-2" size={13} /> Raw
</button>
</div>
}
>
<div className="table-responsive mb-0">
<table className="table table-sm table-nowrap card-table">
<tbody className="list">
Expand Down Expand Up @@ -102,7 +110,7 @@ export function InspectorInstructionCard({
</tbody>
</table>
</div>
</div>
</CollapsibleCard>
);
}

Expand Down
38 changes: 11 additions & 27 deletions app/components/inspector/AccountsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { ErrorCard } from '@components/common/ErrorCard';
import { TableCardBody } from '@components/common/TableCardBody';
import { type AccountInfo, useAccountsInfo } from '@entities/account';
import { useCluster } from '@providers/cluster';
import { cn } from '@shared/utils';
import { CollapsibleCard } from '@shared/ui/collapsible-card';
import { PublicKey, VersionedMessage } from '@solana/web3.js';
import React, { useMemo } from 'react';

Expand All @@ -12,7 +12,6 @@ import { toHex } from '@/app/shared/lib/bytes';
import { AddressFromLookupTableWithContext, AddressWithContext } from './AddressWithContext';

export function AccountsCard({ message }: { message: VersionedMessage }) {
const [expanded, setExpanded] = React.useState(true);
const { url } = useCluster();

const pubkeys = useMemo(() => message.staticAccountKeys, [message.staticAccountKeys]);
Expand Down Expand Up @@ -113,32 +112,17 @@ export function AccountsCard({ message }: { message: VersionedMessage }) {
}

return (
<div className="card">
<div className={cn('card-header', !expanded && 'border-0')}>
<h3 className="card-header-title">{`Account List (${numAccounts})`}</h3>
<button
className={cn('btn btn-sm d-flex', expanded ? 'btn-black active' : 'btn-white')}
onClick={() => setExpanded(current => !current)}
>
{expanded ? 'Collapse' : 'Expand'}
</button>
</div>
{expanded && (
<>
<TableCardBody>{accountRows}</TableCardBody>
{!loading && totalAccountSize > 0 && (
<div className="card-footer">
<div className="e-flex e-items-baseline e-justify-end">
<span className="text-muted e-me-2 e-text-[0.625rem] e-uppercase">
Total Account Size:
</span>
<span className="text-white">{totalAccountSize.toLocaleString('en-US')} bytes</span>
</div>
</div>
)}
</>
<CollapsibleCard title={`Account List (${numAccounts})`}>
<TableCardBody>{accountRows}</TableCardBody>
{!loading && totalAccountSize > 0 && (
<div className="card-footer">
<div className="e-flex e-items-baseline e-justify-end">
<span className="text-muted e-me-2 e-text-[0.625rem] e-uppercase">Total Account Size:</span>
<span className="text-white">{totalAccountSize.toLocaleString('en-US')} bytes</span>
</div>
</div>
)}
</div>
</CollapsibleCard>
);
}

Expand Down
61 changes: 24 additions & 37 deletions app/components/inspector/AddressTableLookupsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import { Address } from '@components/common/Address';
import { useAddressLookupTable } from '@providers/accounts';
import { FetchStatus } from '@providers/cache';
import { cn } from '@shared/utils';
import { CollapsibleCard } from '@shared/ui/collapsible-card';
import { PublicKey, VersionedMessage } from '@solana/web3.js';
import React from 'react';

export function AddressTableLookupsCard({ message }: { message: VersionedMessage }) {
const [expanded, setExpanded] = React.useState(true);

const lookupRows = React.useMemo(() => {
let key = 0;
return message.addressTableLookups.flatMap(lookup => {
Expand All @@ -32,42 +30,31 @@ export function AddressTableLookupsCard({ message }: { message: VersionedMessage
if (message.version === 'legacy') return null;

return (
<div className="card">
<div className="card-header">
<h3 className="card-header-title">Address Table Lookup(s)</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 && (
<div className="table-responsive mb-0">
<table className="table table-sm table-nowrap card-table">
<thead>
<CollapsibleCard title="Address Table Lookup(s)">
<div className="table-responsive mb-0">
<table className="table table-sm table-nowrap card-table">
<thead>
<tr>
<th className="text-muted">Address Lookup Table Address</th>
<th className="text-muted">Table Index</th>
<th className="text-muted">Resolved Address</th>
<th className="text-muted">Details</th>
</tr>
</thead>
{lookupRows.length > 0 ? (
<tbody className="list">{lookupRows}</tbody>
) : (
<tbody className="card-footer">
<tr>
<th className="text-muted">Address Lookup Table Address</th>
<th className="text-muted">Table Index</th>
<th className="text-muted">Resolved Address</th>
<th className="text-muted">Details</th>
<td colSpan={4}>
<span className="text-muted text-center">No entries found</span>
</td>
</tr>
</thead>
{lookupRows.length > 0 ? (
<tbody className="list">{lookupRows}</tbody>
) : (
<tbody className="card-footer">
<tr>
<td colSpan={4}>
<span className="text-muted text-center">No entries found</span>
</td>
</tr>
</tbody>
)}
</table>
</div>
)}
</div>
</tbody>
)}
</table>
</div>
</CollapsibleCard>
);
}

Expand Down
Loading
Loading