feat(ui): display live character counter in MetadataStep description textarea

[Emmyt24]

Description

The MetadataStep component in frontend/src/components/TokenDeployForm/MetadataStep.tsx already computes remainingChars = MAX_DESCRIPTION_LENGTH - description.length (line ~29) and enforces a 500-character cap, but never renders this counter in the UI. Users have no way to know how many characters they have left until the field silently stops accepting input. This issue adds a live counter below the textarea.

Requirements and Context

• Security: Input length is already enforced server-side; the counter is display-only and introduces no new attack surface.
• Testing: Update or add a test in frontend/src/components/TokenDeployForm/__tests__/ that simulates typing into the description field and asserts the counter text updates correctly, including the "near limit" warning color change.
• Documentation: No external docs required; the MAX_DESCRIPTION_LENGTH constant is self-documenting.

Suggested Execution

git checkout -b feat/metadata-step-char-counter

Implement Changes

• Below the <textarea> (or <Input>) for the description field in MetadataStep.tsx, render a <span> or <p> showing {remainingChars} characters remaining.
• Apply a warning style (e.g., text-red-500) when remainingChars <= 50 so users know they are approaching the limit.
• When remainingChars === 0 show "Character limit reached" and disable the field's ability to accept more input (the maxLength HTML attribute is the simplest mechanism).
• Keep the counter hidden when the metadata toggle is off (includeMetadata === false) since the textarea is also hidden in that state.

Test and Commit

1. Run pnpm test --filter frontend to ensure no regressions.
2. Manually test both the green state (>50 chars remaining) and the red warning state (<= 50) in the dev server.

Example Commit Message

feat(ui): add live character counter to MetadataStep description field

Co-authored-by: <your-name> <your-email>

Guidelines

• Do not introduce a third-party character-count library — plain arithmetic on description.length is sufficient.
• Keep the PR scoped to MetadataStep.tsx and its test file only.
• Open the PR against main and link it to this issue with Closes #<issue-number>.

[marvs8]

@marvs8 has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

hi maintainer

ℹ️ Repo Maintainers: To accept this application, review their application or assign @marvs8 to this issue.

[Silver36-ship-it]

@Silver36-ship-it has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

I would love to work on this professionally, please assign it to me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Silver36-ship-it to this issue.

[drips-wave]

Congratulations, @marvs8! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 2, 2026.

🧑‍💻 @marvs8: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊