Add a Recently created keys section that distinguishes new from existing API keys

[mikewheeleer]

Distinguish the just-created key in the API keys list

Description

On src/app/api-keys/page.tsx, after creating a key the secret is shown once and the list reloads, but the new key blends into the existing list with no visual marker, so an operator who just minted a credential cannot tell which row it maps to. This issue highlights the most recently created key and shows its creation time relatively.

Requirements and context

• Repository scope: StableRoute-Org/Stableroute-frontend only.
• Track the prefix of the just-created key in state and mark its list row with a Badge (e.g. "new") from src/components/Badge.tsx until the next reload or navigation.
• Render each key's createdAt with src/components/TimeAgo.tsx instead of dropping it, so age is visible.
• Keep the one-time-secret role="status" block, the revoke action, and the role="alert" error region unchanged.
• Do not retain or display the full secret after the initial one-time render.

Suggested execution

• Fork the repo and create a branch
• git checkout -b enhancement/api-keys-04-new-key-badge
• Implement changes
  • Write code in: src/app/api-keys/page.tsx using src/components/Badge.tsx and src/components/TimeAgo.tsx.
  • Write comprehensive tests in: extend src/app/api-keys/page.test.tsx asserting the badge marks the new key and times render.
  • Add documentation: note the new-key marker in README.md.
  • Add JSDoc to the new-key tracking state.
  • Validate the secret is never re-rendered after the one-time block.
• Test and commit

Test and commit

• Run npm run lint, npm test, and npm run build.
• Cover edge cases: first key, additional key, badge clears after reload, and createdAt rendering.
• Include the full npm test output in the PR description.

Example commit message

feat: badge and timestamp the most recently created api key

Guidelines

• Minimum 95 percent test coverage for impacted modules.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the StableRoute community on Discord for questions, reviews, and faster merges: https://discord.gg/37aCpusvx
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.

[soma-enyi]

Hi team, I'd like to work on this issue. I'm a full-stack developer experienced in TypeScript, Rust, and smart contract development across EVM and Soroban/Stellar ecosystems. I've built and shipped production systems covering backend APIs, frontend interfaces (Next.js, React), CI/CD pipelines, and onchain protocols — so I'm comfortable working across whatever layer this issue touches. My approach I'll start by reproducing the issue locally and reading the surrounding code to understand context and constraints. I'll scope the fix tightly to avoid unnecessary churn, write or update tests to cover the change, and make sure linting, formatting, and existing CI checks all pass before opening a PR. If anything in the issue is ambiguous, I'll flag it early rather than guess. What you can expect A single clean PR with a clear description linking back to this issue. Minimal, well-tested changes that follow the project's existing conventions. Fast turnaround — I'm available to start immediately and responsive to review feedback. Happy to discuss the approach further if needed. Looking forward to contributing.

[soma-enyi]

Hi team, I'd like to work on this issue. I'm a full-stack developer experienced in TypeScript, Rust, and smart contract development across EVM and Soroban/Stellar ecosystems. I've built and shipped production systems covering backend APIs, frontend interfaces (Next.js, React), CI/CD pipelines, and onchain protocols — so I'm comfortable working across whatever layer this issue touches. My approach I'll start by reproducing the issue locally and reading the surrounding code to understand context and constraints. I'll scope the fix tightly to avoid unnecessary churn, write or update tests to cover the change, and make sure linting, formatting, and existing CI checks all pass before opening a PR. If anything in the issue is ambiguous, I'll flag it early rather than guess. What you can expect A single clean PR with a clear description linking back to this issue. Minimal, well-tested changes that follow the project's existing conventions. Fast turnaround — I'm available to start immediately and responsive to review feedback. Happy to discuss the approach further if needed. Looking forward to contributing.

[shinzoxD]

Hi maintainers, picking up this GrantFox bounty.

Plan: implement the requested scope on a fork branch with sync-tests, then open a PR referencing this issue.

Payout wallet (Stellar): GBVHELLD2JE235Y2NGTDT3MWI3T65ON6SY4N6FBHYVDAQ5FZC2CP5QXH
GrantFox OSS campaign — smart escrow payout on merge.

— shinzoxD

[shinzoxD]

Implemented in #322 — ready for review. Adds a 'Recently created' section with emerald highlight and keeps existing keys separate below.