feat: add new files section for Metaplex tokens

[overbit]

Description

This pull request introduces a new "Files" tab for Metaplex NFTs, adding functionality to display associated files and enhancing the user interface with new components and tests. The most important changes include creating new components for rendering Metaplex NFT files, updating the tab configuration to include the "Files" tab, and adding comprehensive tests to ensure functionality.

New Components and Functionality:

• app/components/account/MetaplexFilesCard.tsx: Added the MetaplexFilesCard component to fetch and display files associated with Metaplex NFTs. Includes error handling and a loading state.
• app/address/[address]/files/page-client.tsx: Introduced the MetaplexFilesPageClient component to render the MetaplexFilesCard within a ParsedAccountRenderer and Suspense boundary. (app/address/[address]/files/page-client.tsxR1-R28)
• app/address/[address]/files/page.tsx: Added a wrapper component, MetaplexFilesPage, to render the MetaplexFilesPageClient. (app/address/[address]/files/page.tsxR1-R11)

Tab Configuration Updates:

• app/address/[address]/layout.tsx: Updated TABS_LOOKUP and related logic to include the "Files" tab for Metaplex NFTs. Adjusted tab keys from metaplexNFT to metaplex for consistency. (app/address/[address]/layout.tsxL111-R111, app/address/[address]/layout.tsxR122-R126, app/address/[address]/layout.tsxL135-R140, app/address/[address]/layout.tsxR151-R155, app/address/[address]/layout.tsxR393, app/address/[address]/layout.tsxL446-R457)

Tests:

• app/address/[address]/files/__tests__/page-client.test.tsx: Added unit tests for MetaplexFilesPageClient, including mock implementations for dependencies and tests for rendering behavior. (app/address/[address]/files/tests/page-client.test.tsxR1-R97)
• app/address/[address]/files/__tests__/page.test.tsx: Added unit tests for MetaplexFilesPage to verify correct rendering and parameter passing. (app/address/[address]/files/tests/page.test.tsxR1-R41)

Type of change

• Bug fix
• New feature
• Protocol integration
• Documentation update
• Other (please describe):

Screenshots

BEFORE

AFTER

Testing

Manual testing was also performed on devnet, using the following token:

http://localhost:3000/address/9a1nsHmVZsAHhyoHbAvK2CbShg6FsNTkohPfTKz8MCwt/files?cluster=devnet

Related Issues

Fixes #665

Checklist

• My code follows the project's style guidelines
• I have added tests that prove my fix/feature works
• All tests pass locally and in CI
• I have updated documentation as needed
• CI/CD checks pass
• I have included screenshots for protocol screens (if applicable)
• For security-related features, I have included links to related information

Additional Notes

[vercel]

@overbit is attempting to deploy a commit to the Solana Foundation Team on Vercel.

A member of the Team first needs to authorize it.

[ellipsis-dev]

Caution

Changes requested ❌

Reviewed everything up to eac9889 in 2 minutes and 6 seconds. Click for details.

• Reviewed 748 lines of code in 7 files
• Skipped 0 files when reviewing.
• Skipped posting 3 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. app/address/[address]/layout.tsx:111

• Draft comment:
  The tab key was changed from 'metaplexNFT' to 'metaplex'. Ensure that all downstream routing and related logic are updated accordingly.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the author to ensure that all downstream routing and related logic are updated accordingly. This falls under asking the author to ensure something is tested or verified, which is against the rules. The comment does not provide a specific suggestion or point out a specific issue, so it should be removed.

2. app/address/[address]/layout.tsx:58

• Draft comment:
  The PR description mentions resolving an issue regarding transaction history for deleted accounts, but the changes here only add a new Files tab for Metaplex NFTs. Please verify that the intended issue is fully addressed.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

3. app/components/account/__tests__/MetaplexFilesCard.test.tsx:31

• Draft comment:
  Global fetch is mocked here. Ensure that this global override does not leak into other tests or consider restoring global.fetch after these tests if necessary.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% 1. The comment is about test infrastructure rather than actual code changes. 2. The test file already follows best practices by using beforeEach() to reset mocks. 3. Global mocks in test files are a common and accepted practice. 4. The comment is speculative about potential issues rather than pointing out an actual problem. The comment raises a valid concern about test isolation, which is important for maintaining a reliable test suite. However, the test file already handles this correctly through vi.clearAllMocks() and proper test isolation. The comment is overly cautious about a non-issue. Delete the comment as it raises speculative concerns about a properly implemented testing pattern.

Workflow ID: wflow_CiOVObTOvatyMUND

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[overbit]

@ngundotra can I get a review on this?

[ngundotra]

Why not show the whole metadata json in the tab, instead of just doing showing Files ?

[overbit]

@ngundotra we could do that as an another page. This files allows consistency with the attributes page

[overbit]

@ngundotra WDYT?