-
Notifications
You must be signed in to change notification settings - Fork 327
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: decode ComputeBudget data at inspector (#466)
PR allows to use ComputeBudgetDetailsCard at the inspector page. This is achieved by allowing to specify component that would be used to decode the data. <!-- ELLIPSIS_HIDDEN --> ---- > [!IMPORTANT] > Adds `BaseInstructionCard` for instruction decoding and integrates `ComputeBudgetDetailsCard` into the inspector with specific handling for ComputeBudget instructions. > > - **Behavior**: > - Introduces `BaseInstructionCard` in `BaseInstructionCard.tsx` for decoding and displaying instruction data. > - Integrates `ComputeBudgetDetailsCard` into the inspector via `InstructionsSection.tsx` and `InspectorInstructionCard`. > - Handles ComputeBudget instructions specifically, with fallback to `UnknownDetailsCard` for others. > - **Refactoring**: > - Renames `RawDetails` to `BaseRawDetails` and `RawParsedDetails` to `BaseRawParsedDetails`. > - Refactors `InstructionCard` to use `BaseInstructionCard`. > - **Testing**: > - Adds tests for `ComputeBudgetDetailsCard` in `ComputeBudgetDetailsCard.spec.tsx`. > - Adds utility tests in `into-transaction-instruction-from-versioned-message.spec.tsx`. > > <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=solana-foundation%2Fexplorer&utm_source=github&utm_medium=referral)<sup> for 159823e. It will automatically update as commits are pushed.</sup> <!-- ELLIPSIS_HIDDEN -->
- Loading branch information
Showing
12 changed files
with
556 additions
and
233 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| import { Address } from '@components/common/Address'; | ||
| import { useScrollAnchor } from '@providers/scroll-anchor'; | ||
| import { ParsedInstruction, SignatureResult, TransactionInstruction } from '@solana/web3.js'; | ||
| import getInstructionCardScrollAnchorId from '@utils/get-instruction-card-scroll-anchor-id'; | ||
| import React from 'react'; | ||
| import { Code } from 'react-feather'; | ||
|
|
||
| import { BaseRawDetails } from './BaseRawDetails'; | ||
| import { BaseRawParsedDetails } from './BaseRawParsedDetails'; | ||
|
|
||
| type InstructionProps = { | ||
| title: string; | ||
| children?: React.ReactNode; | ||
| result: SignatureResult; | ||
| index: number; | ||
| ix: TransactionInstruction | ParsedInstruction; | ||
| defaultRaw?: boolean; | ||
| innerCards?: JSX.Element[]; | ||
| childIndex?: number; | ||
| // raw can be used to display raw instruction information | ||
| raw?: TransactionInstruction; | ||
| // will be triggered on requesting raw data for instruction, if present | ||
| onRequestRaw?: () => void; | ||
| }; | ||
|
|
||
| export function BaseInstructionCard({ | ||
| title, | ||
| children, | ||
| result, | ||
| index, | ||
| ix, | ||
| defaultRaw, | ||
| innerCards, | ||
| childIndex, | ||
| raw, | ||
| onRequestRaw, | ||
| }: InstructionProps) { | ||
| const [resultClass] = ixResult(result, index); | ||
| const [showRaw, setShowRaw] = React.useState(defaultRaw || false); | ||
| 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 | ||
| onRequestRaw?.(); | ||
| } | ||
|
|
||
| return setShowRaw(r => !r); | ||
| }; | ||
| const scrollAnchorRef = useScrollAnchor( | ||
| 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"> | ||
| <span className={`badge bg-${resultClass}-soft me-2`}> | ||
| #{index + 1} | ||
| {childIndex !== undefined ? `.${childIndex + 1}` : ''} | ||
| </span> | ||
| {title} | ||
| </h3> | ||
|
|
||
| <button | ||
| disabled={defaultRaw} | ||
| className={`btn btn-sm d-flex align-items-center ${showRaw ? 'btn-black active' : 'btn-white'}`} | ||
| 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}> | ||
| <div className="inner-cards">{innerCards}</div> | ||
| </td> | ||
| </tr> | ||
| </> | ||
| )} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function ixResult(result: SignatureResult, index: number) { | ||
| if (result.err) { | ||
| const err = result.err as any; | ||
| const ixError = err['InstructionError']; | ||
| if (ixError && Array.isArray(ixError)) { | ||
| const [errorIndex, error] = ixError; | ||
| if (Number.isInteger(errorIndex) && errorIndex === index) { | ||
| return ['warning', `Error: ${JSON.stringify(error)}`]; | ||
| } | ||
| } | ||
| return ['dark']; | ||
| } | ||
| return ['success']; | ||
| } |
5 changes: 3 additions & 2 deletions
5
app/components/instruction/RawDetails.tsx → app/components/common/BaseRawDetails.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...mponents/instruction/RawParsedDetails.tsx → ...omponents/common/BaseRawParsedDetails.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.