diff --git a/README.md b/README.md index 356f3e1a..85d5a244 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,9 @@ - `pnpm test` \ Launches the test runner in the interactive watch mode.
+- `npm run lint -- --fix` \ + Lints the code and fixes any linting errors. + # Disclaimer All claims, content, designs, algorithms, estimates, roadmaps, diff --git a/app/address/[address]/anchor-program/page.tsx b/app/address/[address]/anchor-program/page.tsx deleted file mode 100644 index 986b5520..00000000 --- a/app/address/[address]/anchor-program/page.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { AnchorProgramCard } from '@components/account/AnchorProgramCard'; -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'; - -type Props = Readonly<{ - params: { - address: string; - }; -}>; - -export async function generateMetadata(props: AddressPageMetadataProps): Promise { - return { - description: `The Interface Definition Language (IDL) file for the Anchor program at address ${props.params.address} on Solana`, - title: `Anchor Program IDL | ${await getReadableTitleFromAddress(props)} | Solana`, - }; -} - -export default function AnchorProgramIDLPage({ params: { address } }: Props) { - return ( - }> - - - ); -} diff --git a/app/address/[address]/idl/page.tsx b/app/address/[address]/idl/page.tsx index 3a80832c..9054f574 100644 --- a/app/address/[address]/idl/page.tsx +++ b/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 { - 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 ( - }> - - +
+
+
    + {anchorIdl && ( +
  • + +
    • + )} + {metadataIdl && ( +
  • + +
    • + )} +
+
+
+ {activeTab === 'anchor' && anchorIdl && ( + + )} + {activeTab === 'metadata' && metadataIdl && ( + + )} +
+
); } diff --git a/app/address/[address]/layout.tsx b/app/address/[address]/layout.tsx index 64477682..9e2927dc 100644 --- a/app/address/[address]/layout.tsx +++ b/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: ( - }> - - - ), - 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 ( -
  • - - {tab.title} - -
    • - ); -} - 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; } diff --git a/app/components/account/AnchorProgramCard.tsx b/app/components/account/AnchorProgramCard.tsx deleted file mode 100644 index 26422295..00000000 --- a/app/components/account/AnchorProgramCard.tsx +++ /dev/null @@ -1,71 +0,0 @@ -'use client'; - -import { useAnchorProgram } from '@providers/anchor'; -import { useCluster } from '@providers/cluster'; -import { useState } from 'react'; -import ReactJson from 'react-json-view'; - -import { getIdlSpecType } from '@/app/utils/convertLegacyIdl'; - -import { DownloadableButton } from '../common/Downloadable'; -import { IDLBadge } from '../common/IDLBadge'; - -export function AnchorProgramCard({ programId }: { programId: string }) { - const { url } = useCluster(); - const { idl } = useAnchorProgram(programId, url); - const [collapsedValue, setCollapsedValue] = useState(1); - - if (!idl) { - return null; - } - const spec = getIdlSpecType(idl); - - return ( -
    -
    -
    -
    -

    Anchor IDL

    -
    -
    - - Download IDL - -
    -
    -
    -
    - -
    - setCollapsedValue(e.target.checked ? false : 1)} - /> - -
    -
    - -
    - -
    -
    - ); -} diff --git a/app/components/account/IdlCard.tsx b/app/components/account/IdlCard.tsx index 88bad300..99c41695 100644 --- a/app/components/account/IdlCard.tsx +++ b/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(1); if (!idl) { @@ -26,7 +29,7 @@ export function IdlCard({ programId }: { programId: string }) {
    -

    Program IDL (from Program Metadata PDA)

    +

    {title}