feat: token 2022 page rework

[rogaldh]

Description

This PR improves "Token Extensions" token page. Goal: better display for active extensions.

Type of change

• New feature
• Documentation update
• Other (please describe): improve project tools

Screenshots

Testing

pnpm t
pnpm format

Related Issues

None.

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)

---

Important

Enhances the Token 2022 page with a new UI for displaying active token extensions, including new components, styles, and configuration updates.

• Behavior:
  • Adds TokenExtensionsPage in page.tsx to display token extensions for a given address.
  • Introduces TokenExtensionsCard and TokenExtensionsSection components to render token extension details.
  • Implements TokenExtensionRow in TokenAccountSection.tsx to display individual token extension data.
  • Adds tests for TokenExtensionRow in TokenExtensionRow.spec.tsx.
• UI Components:
  • Adds Accordion, Badge, and Tooltip components in ui/accordion.tsx, ui/badge.tsx, and ui/tooltip.tsx.
  • Introduces StatusBadge in StatusBadge.tsx to indicate the status of token extensions.
• Styles:
  • Adds Tailwind CSS configuration in tailwind.config.ts and styles.css.
  • Updates SCSS files in dashkit to remove unused styles and adjust navbar styles.
• Configuration:
  • Adds .prettierrc.cjs for Prettier configuration with Tailwind CSS plugin.
  • Updates .eslintrc.json to disable @typescript-eslint/no-non-null-assertion rule.
  • Adds postcss.config.mjs for PostCSS configuration.
• Dependencies:
  • Adds @radix-ui/react-accordion, @radix-ui/react-tooltip, and tailwind-merge to package.json.
  • Updates package.json scripts to include pnpm gen for generating UI components.

^{This description was created by for a8aa778. It will automatically update as commits are pushed.}

[vercel]

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

A member of the Team first needs to authorize it.

[ngundotra]

nit: this is a bit confusing, what was this used to generate?

Do developers need to use this, or is this just recommended flow for creating new components on the Explorer?

[rogaldh]

Second one. I've created an accordion, a tooltip, and a new badge with shadcn/ui and this is the recommended way to generate such components. Didn't want to leave just a script with shadcn without some words about it

[ngundotra]

Still missing a toggeable background for <>Raw, otherwise, everything else looks awesome & ready to ship

[rogaldh]

Still missing a toggeable background for <>Raw, otherwise, everything else looks awesome & ready to ship

fixed

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to a8aa778 in 3 minutes and 47 seconds

More details

• Looked at 2279 lines of code in 28 files
• Skipped 24 files when reviewing.
• Skipped posting 15 drafted comments based on config settings.

1. app/components/common/TableCardBody.tsx:16

• Draft comment:
  Duplicate declaration for TableCardBodyProps – consider merging the two interface definitions to avoid conflicts.
• 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.

2. app/components/account/TokenAccountSection.tsx:642

• Draft comment:
  TokenExtensionRow is defined as a function (not a React component) and used directly for rendering. Consider refactoring it into a proper React component for better readability and lifecycle management.
• Reason this comment was not posted:
  Comment was on unchanged code.

3. app/components/account/__test__/TokenExtensionRow.spec.tsx:14

• Draft comment:
  Mocking 'next/navigation' and calling TokenExtensionRow directly may obscure potential issues when integrated as a React component. Ensure tests remain robust if refactored into a standard component.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 20% <= threshold 50%
  The comment suggests ensuring tests remain robust if the code is refactored, which violates the rule against asking the PR author to ensure testing. It doesn't provide a specific suggestion or point out a specific issue with the code.

4. app/prettierrc.cjs:5

• Draft comment:
  Ensure that prettierConfigSolana.plugins is always an array – using the nullish operator with concat might hide cases where plugins is undefined.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50%
  None

5. app/components/common/TableCardBody.tsx:16

• Draft comment:
  Duplicate interface declaration for TableCardBodyProps detected. Merge the two definitions (one with optional headerComponent) into a single interface.
• 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.

6. .prettierrc.cjs:5

• Draft comment:
  Optional: Consider using the spread operator instead of concatenating an array. For example, use plugins: [...(prettierConfigSolana.plugins || []), 'prettier-plugin-tailwindcss'].
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50%
  This is a style preference in a configuration file. Both approaches work equally well functionally. The spread operator version is more modern and arguably more readable, but the current code is not wrong or problematic. This feels like a minor stylistic preference rather than a significant improvement.
  The current code is perfectly functional and clear. The suggestion might actually be worse since it changes from nullish coalescing (??) to logical OR (||), which behaves differently with falsy values.
  While the spread operator might be more modern, making this change would be purely cosmetic and doesn't meaningfully improve code quality or maintainability.
  Delete this comment as it suggests a purely stylistic change that doesn't materially improve the code.

7. app/components/account/__test__/TokenExtensionRow.spec.tsx:32

• Draft comment:
  Consider invoking the TokenExtensionRow as a component (<TokenExtensionRow ... />) rather than calling it as a plain function. This is more conventional for React components.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

8. app/components/account/TokenAccountSection.tsx:1012

• Draft comment:
  Typo: The key prop in the additional metadata map is written as key="{keyValuePair[0]}". It should be key={keyValuePair[0]} so that the value is used properly.
• 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.

9. app/components/account/TokenExtensionsSection.tsx:150

• Draft comment:
  Typographical error: In the comment on line 150, 'tootip's position' should be corrected to 'tooltip's position'.
• 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%
  While the comment is technically correct about the typo, it's just pointing out a spelling error in a comment, not in actual code. Comments are for developer documentation and this typo doesn't impact functionality. The rules state we should only keep comments that require code changes, and this is more of a trivial documentation fix.
  The typo could make the comment slightly less clear for future developers. Also, maintaining good documentation quality could be considered important.
  However, this is an extremely minor issue that doesn't affect code functionality or significantly impact readability. The meaning is still clear despite the typo.
  Delete this comment as it's too minor and doesn't require any actual code changes - it only affects a documentation comment.

10. app/components/shared/ui/badge.tsx:57

• Draft comment:
  Typographical error: Duplicate 'dark:' modifier observed in the 'destructive' variant class string. Please remove the extra 'dark:' prefixes to ensure consistency.
• Reason this comment was not posted:
  Marked as duplicate.

11. app/scss/dashkit/_navbar.scss:559

• Draft comment:
  Typographical error: The comment 'Creates a small vertion of the vertical navbar' contains a typo. Please change 'vertion' to 'version'.
• 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.

12. app/scss/dashkit/_variables.scss:482

• Draft comment:
  Typographical issue: The variable declaration for $pagination-hover-border-color includes !default twice. Please remove the duplicate to clean up the code.
• 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.

13. app/scss/dashkit/_variables.scss:159

• Draft comment:
  Typographical issue: In the comment for $spacer * 9 (expected to equal 216px), there are extra commas (216px,,,,). It might be clearer to remove the extra commas unless they were intentional, to avoid confusion.
• 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.

14. docs/development.md:13

• Draft comment:
  In line 13, the phrase "It translates needed component into ..." could be improved for clarity. Consider changing it to "It translates the necessary component into ..." or "It translates the component name into ..." to make the intent clearer.
• 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%
  Documentation clarity is important, but this suggestion is extremely minor and subjective. The existing wording "needed component" is understandable and grammatically correct. The suggested alternatives don't significantly improve clarity. PR comments should focus on substantial issues rather than minor wording preferences.
  Documentation clarity directly impacts developer experience, so maybe any improvement in clarity is worth suggesting?
  While clarity is important, this change is too minor to warrant a PR comment. The existing wording is already clear enough for developers to understand.
  Delete this comment as it suggests an extremely minor wording change that doesn't significantly improve clarity or fix any real issues.

15. postcss.config.mjs:7

• Draft comment:
  It appears that the file is missing a trailing newline at the end. Could you please add an empty newline at the end of the file?
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 40% vs. threshold = 50%
  Missing trailing newlines can cause issues with some tools and is generally considered good practice. Since this is a new file being added, pointing this out now is better than letting it persist. The issue is clear and actionable. However, many build tools and linters would catch this automatically.
  This might be too minor of an issue to warrant a PR comment. Many editors automatically add trailing newlines, and build tools often enforce this.
  While minor, it's a clear, objective issue with a simple fix that improves code quality. The fact that it's a new file makes it worth addressing now.
  Keep the comment as it points out a real, actionable issue in a newly added file, though with a relatively low confidence score due to its minor nature.

Workflow ID: wflow_9Ez3421nSeg8gxTB

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

This component duplicates the existing Tab component. Consider using Tab instead, passing tab.path and tab.title as separate parameters.

• function Tab (layout.tsx)

[rogaldh]

That's wrong. Tab has different logic for isActive inside it. Accepting this will lead to incorrect state for tabs

[rogaldh]

might be a good idea to rename Tab to something more specific or to bypass isActive through props