feat: add IDL interact tab

.env.example

@@ -1,4 +1,5 @@
-# Fill these out with a custom RPC url to test the explorer locally without getting rate-limited
+## Configuration for RPC enpoints
+### Fill these out with a custom RPC url to test the explorer locally without getting rate-limited
 NEXT_PUBLIC_MAINNET_RPC_URL=
 NEXT_PUBLIC_DEVNET_RPC_URL=
 NEXT_PUBLIC_TESTNET_RPC_URL=
@@ -13,12 +14,15 @@ NEXT_PUBLIC_METADATA_USER_AGENT="Solana Explorer"
 NEXT_PUBLIC_PMP_IDL_ENABLED=true
 ## Configuration for "security.txt" feature enabled
 NEXT_PUBLIC_PMP_SECURITY_TXT_ENABLED=true
+## Configuration for "interactive IDL" feature enabled
+NEXT_PUBLIC_INTERACTIVE_IDL_ENABLED=true
 NEXT_PUBLIC_BAD_TOKENS=
 ## Configuration for "View CNFT's Original Resource"
 NEXT_PUBLIC_VIEW_ORIGINAL_DISPLAY_ENABLED=
 ## Configuration for Sentry
 ### Flag whether to catch exceptions with the boundary on the client or not
 NEXT_PUBLIC_ENABLE_CATCH_EXCEPTIONS=1
+### Flag that allows to not collect errors globally (allows to track for errors that we need at the moment
 SENTRY_SUPPRESS_GLOBAL_ERROR_HANDLER_FILE_WARNING=1
 SENTRY_ORG=
 SENTRY_DSN=

.github/workflows/ci.yaml

@@ -22,7 +22,7 @@ jobs:
       node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           sparse-checkout: |
             .nvmrc
@@ -43,7 +43,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Install package manager
         uses: pnpm/action-setup@v4

.github/workflows/update-feature-gates.yml

@@ -12,7 +12,7 @@ jobs:
   update:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Set up Python
         uses: actions/setup-python@v4

app/entities/cluster/model/use-explorer-link.ts

@@ -46,7 +46,13 @@ export function useExplorerLink(path: string) {
     // Add query parameters if any
     const queryString = params.toString();
     if (queryString) {
-        url += `?${queryString}`;
+        if (url.indexOf('?') === -1) {
+            url += `?${queryString}`;
+        } else {
+            // change order for additional params as having ?message at the url and placing it first, breaks input at the Inspector
+            const [path, qs] = url.split('?');
+            url = `${path}?${queryString}&${qs}`;
+        }
     }
 
     return { link: url };

app/entities/idl/index.ts

@@ -8,7 +8,7 @@ export type {
     InstructionData,
     NestedInstructionAccountsData,
 } from './model/formatters/formatted-idl';
-export { getIdlVersion } from './model/idl-version';
+export { getIdlVersion, type AnchorIdl, type CodamaIdl, type SupportedIdl } from './model/idl-version';
 
 export { getIdlSpecType as getDisplayIdlSpecType } from './model/converters/convert-display-idl';
 export { formatDisplayIdl, formatSerdeIdl, getFormattedIdl } from './model/formatters/format';

app/entities/idl/model/idl-version.ts

@@ -4,8 +4,11 @@ import type { RootNode } from 'codama';
 import { getIdlSpecType as getSerdeIdlSpecType } from './converters/convert-legacy-idl';
 
 export type IdlVersion = 'Legacy' | '0.30.1' | RootNode['version'];
+export type CodamaIdl = RootNode;
+export type AnchorIdl = Idl;
+export type SupportedIdl = CodamaIdl | AnchorIdl;
 
-export function getIdlVersion(idl: RootNode | Idl): IdlVersion {
+export function getIdlVersion(idl: SupportedIdl): IdlVersion {
     const spec = getSerdeIdlSpecType(idl);
     switch (spec) {
         case 'legacy':

app/features/idl/formatted-idl/lib/invariant.ts

@@ -1,3 +1,3 @@
-export function invariant(cond: any, message?: string): asserts cond is NonNullable<unknown> {
+export function invariant(cond: unknown, message?: string): asserts cond is NonNullable<unknown> {
     if (cond === undefined) throw new Error(message ?? 'invariant violated');
 }

app/features/idl/formatted-idl/ui/AnchorFormattedIdl.tsx

@@ -1,12 +1,12 @@
-import { Idl } from '@coral-xyz/anchor';
+import type { AnchorIdl } from '@entities/idl';
 import { formatDisplayIdl, getFormattedIdl, useFormatAnchorIdl } from '@entities/idl';
 
 import { invariant } from '../lib/invariant';
 import { useSearchIdl } from '../model/search';
 import { BaseFormattedIdl } from './BaseFormattedIdl';
 import type { StandardFormattedIdlProps } from './types';
 
-export function AnchorFormattedIdl({ idl, programId, searchStr = '' }: StandardFormattedIdlProps<Idl>) {
+export function AnchorFormattedIdl({ idl, programId, searchStr = '' }: StandardFormattedIdlProps<AnchorIdl>) {
     invariant(idl, 'IDL is absent');
     const formattedIdl = getFormattedIdl(formatDisplayIdl, idl, programId);
     const anchorFormattedIdl = useFormatAnchorIdl(idl ? formattedIdl : idl);

app/features/idl/formatted-idl/ui/BaseFormattedIdl.tsx

@@ -1,17 +1,21 @@
 'use client';
 
-import { cn } from '@components/shared/utils';
 import type { Idl } from '@coral-xyz/anchor';
+import { cn } from '@shared/utils';
 import type { RootNode } from 'codama';
 import { useEffect, useState } from 'react';
 
 import { useTabs } from '../../model/use-tabs';
 import { SearchHighlightProvider } from './SearchHighlightContext';
-import { FormattedIdlViewProps } from './types';
+import type { FormattedIdlViewProps } from './types';
 
-export function BaseFormattedIdl({ idl, searchStr }: FormattedIdlViewProps<Idl> | FormattedIdlViewProps<RootNode>) {
+export function BaseFormattedIdl({
+    idl,
+    originalIdl,
+    searchStr,
+}: FormattedIdlViewProps<Idl> | FormattedIdlViewProps<RootNode>) {
     const [activeTabIndex, setActiveTabIndex] = useState<number | null>(null);
-    const tabs = useTabs(idl, searchStr);
+    const tabs = useTabs(idl, originalIdl, searchStr);
 
     useEffect(() => {
         if (typeof activeTabIndex === 'number') return;
@@ -40,7 +44,7 @@ export function BaseFormattedIdl({ idl, searchStr }: FormattedIdlViewProps<Idl>
                         </button>
                     ))}
                 </div>
-                <div className="table-responsive e-mb-0 e-min-h-96">
+                <div className={activeTab.id !== 'interact' ? 'e-overflow-x-auto md:e-overflow-x-scroll' : ''}>
                     <ActiveTab activeTab={activeTab} />
                 </div>
             </div>

app/features/idl/formatted-idl/ui/CodamaFormattedIdl.tsx

@@ -1,13 +1,14 @@
+import type { CodamaIdl } from '@entities/idl';
 import { useFormatCodamaIdl } from '@entities/idl';
-import type { RootNode } from 'codama';
 
 import { invariant } from '../lib/invariant';
 import { useSearchIdl } from '../model/search';
 import { BaseFormattedIdl } from './BaseFormattedIdl';
+import type { StandardFormattedIdlProps } from './types';
 
-export function CodamaFormattedIdl({ idl, searchStr = '' }: { idl?: RootNode; searchStr?: string }) {
+export function CodamaFormattedIdl({ idl, searchStr = '' }: StandardFormattedIdlProps<CodamaIdl>) {
     invariant(idl, 'IDL is absent');
     const formattedIdl = useFormatCodamaIdl(idl);
     const searchResults = useSearchIdl(formattedIdl, searchStr);
-    return <BaseFormattedIdl idl={searchResults} searchStr={searchStr} />;
+    return <BaseFormattedIdl idl={searchResults} originalIdl={idl} searchStr={searchStr} />;
 }

app/features/idl/formatted-idl/ui/stories/CodamaFormattedIdl.stories.tsx

@@ -1,5 +1,6 @@
 import codamaIdlMock from '@entities/idl/mocks/codama/codama-1.0.0-ProgM6JCCvbYkfKqJYHePx4xxSUSqJp7rh8Lyv7nk7S.json';
 import convertedFromAnchorIdlMock from '@entities/idl/mocks/codama/whirlpool@0.30.1.json';
+import { Keypair } from '@solana/web3.js';
 import type { Meta, StoryObj } from '@storybook/react';
 import type { RootNode } from 'codama';
 
@@ -27,11 +28,13 @@ type Story = StoryObj<typeof meta>;
 export const DisplayCodamaIdl: Story = {
     args: {
         idl: codamaIdlMock as unknown as RootNode,
+        programId: Keypair.generate().publicKey.toBase58(),
     },
 };
 
 export const DisplayConvertedAnchorIdl: Story = {
     args: {
         idl: convertedFromAnchorIdlMock as unknown as RootNode,
+        programId: Keypair.generate().publicKey.toBase58(),
     },
 };

app/features/idl/formatted-idl/ui/types.d.ts

@@ -8,7 +8,7 @@ export type StandardFormattedIdlProps<T> = {
 
 export type FormattedIdlViewProps<T> = {
     idl: FormattedIdl | null;
-    originalIdl?: T;
+    originalIdl: T;
     searchStr?: string;
 };