Code review. Move IDLs into their own tab

README.md

@@ -22,6 +22,9 @@
 -   `pnpm test` \
     Launches the test runner in the interactive watch mode.<br />
 
+-   `npm run lint -- --fix` \
+    Lints the code and fixes any linting errors.
+
 # Disclaimer
 
 All claims, content, designs, algorithms, estimates, roadmaps,

app/address/[address]/idl/page.tsx

@@ -1,27 +1,51 @@
-import { LoadingCard } from '@components/common/LoadingCard';
-import getReadableTitleFromAddress, { AddressPageMetadataProps } from '@utils/get-readable-title-from-address';
-import { Metadata } from 'next/types';
-import { Suspense } from 'react';
+'use client';
 
-import { IdlCard } from '@/app/components/account/IdlCard';
+import { IdlCard } from '@components/account/IdlCard';
+import { useAnchorProgram } from '@providers/anchor';
+import { useCluster } from '@providers/cluster';
+import { useIdlFromProgramMetadataProgram } from '@providers/idl';
+import { useState } from 'react';
 
-type Props = Readonly<{
-    params: {
-        address: string;
-    };
-}>;
+export default function IdlPage({ params: { address } }: { params: { address: string } }) {
+    const { url } = useCluster();
+    const [activeTab, setActiveTab] = useState<'anchor' | 'metadata'>('anchor');
+    const { idl: anchorIdl } = useAnchorProgram(address, url);
+    const { idl: metadataIdl } = useIdlFromProgramMetadataProgram(address, url);
 
-export async function generateMetadata(props: AddressPageMetadataProps): Promise<Metadata> {
-    return {
-        description: `The Interface Definition Language (IDL) file for the program at address ${props.params.address} on Solana`,
-        title: `Program IDL | ${await getReadableTitleFromAddress(props)} | Solana`,
-    };
-}
-
-export default function AnchorProgramIDLPage({ params: { address } }: Props) {
     return (
-        <Suspense fallback={<LoadingCard message="Loading program IDL" />}>
-            <IdlCard programId={address} />
-        </Suspense>
+        <div className="card">
+            <div className="card-header">
+                <ul className="nav nav-tabs card-header-tabs">
+                    {anchorIdl && (
+                        <li className="nav-item">
+                            <button
+                                className={`nav-link ${activeTab === 'anchor' ? 'active' : ''}`}
+                                onClick={() => setActiveTab('anchor')}
+                            >
+                                Anchor IDL
+                            </button>
+                        </li>
+                    )}
+                    {metadataIdl && (
+                        <li className="nav-item">
+                            <button
+                                className={`nav-link ${activeTab === 'metadata' ? 'active' : ''}`}
+                                onClick={() => setActiveTab('metadata')}
+                            >
+                                Program Metadata IDL
+                            </button>
+                        </li>
+                    )}
+                </ul>
+            </div>
+            <div className="card-body">
+                {activeTab === 'anchor' && anchorIdl && (
+                    <IdlCard idl={anchorIdl} programId={address} title="Anchor IDL" />
+                )}
+                {activeTab === 'metadata' && metadataIdl && (
+                    <IdlCard idl={metadataIdl} programId={address} title="Anchor IDL (Program metadata)" />
+                )}
+            </div>
+        </div>
     );
 }

app/address/[address]/layout.tsx

@@ -560,7 +560,6 @@ export type MoreTabs =
     | 'attributes'
     | 'domains'
     | 'security'
-    | 'anchor-program'
     | 'program-metadata'
     | 'idl'
     | 'anchor-account'
@@ -723,20 +722,6 @@ function getCustomLinkedTabs(pubkey: PublicKey, account: Account) {
         tab: programMultisigTab,
     });
 
-    const anchorProgramTab: Tab = {
-        path: 'anchor-program',
-        slug: 'anchor-program',
-        title: 'Anchor Program IDL',
-    };
-    tabComponents.push({
-        component: (
-            <React.Suspense key={anchorProgramTab.slug} fallback={<></>}>
-                <AnchorProgramIdlLink tab={anchorProgramTab} address={pubkey.toString()} pubkey={pubkey} />
-            </React.Suspense>
-        ),
-        tab: anchorProgramTab,
-    });
-
     const idlTab: Tab = {
         path: 'idl',
         slug: 'idl',
@@ -803,32 +788,15 @@ function ProgramMetaDataLink({ tab, address, pubkey }: { tab: Tab; address: stri
     );
 }
 
-function AnchorProgramIdlLink({ tab, address, pubkey }: { tab: Tab; address: string; pubkey: PublicKey }) {
-    const { url } = useCluster();
-    const { idl } = useAnchorProgram(pubkey.toString(), url);
-    const anchorProgramPath = useClusterPath({ pathname: `/address/${address}/${tab.path}` });
-    const selectedLayoutSegment = useSelectedLayoutSegment();
-    const isActive = selectedLayoutSegment === tab.path;
-    if (!idl) {
-        return null;
-    }
-
-    return (
-        <li key={tab.slug} className="nav-item">
-            <Link className={`${isActive ? 'active ' : ''}nav-link`} href={anchorProgramPath}>
-                {tab.title}
-            </Link>
-        </li>
-    );
-}
-
 function IdlDataLink({ tab, address, pubkey }: { tab: Tab; address: string; pubkey: PublicKey }) {
     const { url } = useCluster();
-    const { idl } = useIdlFromProgramMetadataProgram(pubkey.toString(), url);
+    const { idl: anchorIdl } = useAnchorProgram(pubkey.toString(), url);
+    const { idl: metadataIdl } = useIdlFromProgramMetadataProgram(pubkey.toString(), url);
     const path = useClusterPath({ pathname: `/address/${address}/${tab.path}` });
     const selectedLayoutSegment = useSelectedLayoutSegment();
     const isActive = selectedLayoutSegment === tab.path;
-    if (!idl) {
+
+    if (!anchorIdl && !metadataIdl) {
         return null;
     }
 

app/components/account/IdlCard.tsx

@@ -4,15 +4,18 @@ import { useCluster } from '@providers/cluster';
 import { useState } from 'react';
 import ReactJson from 'react-json-view';
 
-import { useIdlFromProgramMetadataProgram } from '@/app/providers/idl';
 import { getIdlSpecType } from '@/app/utils/convertLegacyIdl';
 
 import { DownloadableButton } from '../common/Downloadable';
 import { IDLBadge } from '../common/IDLBadge';
 
-export function IdlCard({ programId }: { programId: string }) {
-    const { url } = useCluster();
-    const { idl } = useIdlFromProgramMetadataProgram(programId, url);
+interface Props {
+    idl: Idl;
+    programId: string;
+    title?: string;
+}
+
+export function IdlCard({ idl, programId, title = "Program IDL" }: Props) {
     const [collapsedValue, setCollapsedValue] = useState<boolean | number>(1);
 
     if (!idl) {
@@ -26,7 +29,7 @@ export function IdlCard({ programId }: { programId: string }) {
             <div className="card-header">
                 <div className="row align-items-center">
                     <div className="col">
-                        <h3 className="card-header-title">Program IDL (from Program Metadata PDA)</h3>
+                        <h3 className="card-header-title">{title}</h3>
                     </div>
                     <div className="col-auto btn btn-sm btn-primary d-flex align-items-center">
                         <DownloadableButton

package.json

@@ -30,7 +30,7 @@
         "@solana/web3.js": "^1.66.6",
         "@solflare-wallet/utl-sdk": "^1.4.0",
         "@types/bn.js": "5.1.0",
-        "solana-program-metadata": "^0.0.17",
+        "solana-program-metadata": "1.0.0",
         "axios": "^0.28.0",
         "bignumber.js": "^9.0.2",
         "bn.js": "5.2.1",