feat: implement stream details screen

[mubking]

Summary

Implements the /streams/[id] dynamic route as required by issue #72.

Changes

• app/streams/[id]/page.tsx — dynamic Server Component with mock stream data, handles invalid IDs with notFound()
• components/LiveCounter.tsx — Client Component that increments balance every second with proper interval cleanup
• components/ProgressBar.tsx — reusable progress bar showing streamed percentage

Acceptance Criteria

• Progress bar visualization of streamed percentage
• Transaction history list (withdrawals)
• Live counter updating every second (simulated)

Closes #72

[ogazboiz]

hey, thanks for implementing the stream details screen! the [id]/page.tsx dynamic route is the right approach for Next.js.

a couple of things to fix before we can merge: there are merge conflicts with main (git fetch origin && git rebase origin/main). also, there's a file called frontend/app/streams/n in the diff — looks like an accidental commit, could you remove it? once those two things are sorted this looks ready!

[mubking]

Hi @ogazboiz,
I’ve addressed the feedback:

Rebased with main and resolved conflicts

Removed the accidental file from the diff

The branch is now up to date. Please let me know if anything else needs adjustment. Thanks!

[ogazboiz]

hey @mubking, thanks for the update and for rebasing!

i noticed the CI checks for "Backend CI" and "Frontend CI" are still failing though. could you take one more look at the logs? it might be related to some missing devDependencies or the workspace setup in those steps.

once those are green, we'll be ready to merge!

[ogazboiz]

hey, thanks for the contribution!

just had a look at this — the backend and frontend CI checks are currently failing and there are merge conflicts with main.

could you pull the latest changes, resolve the conflicts, and take a look at the workflow logs under the "Checks" tab to fix the failing steps?

once that's sorted let us know and we'll take another look — happy to help if you get stuck! if you want to contribute more or follow up if issues are open, join us on Telegram: https://t.me/+DOylgFv1jyJlNzM0

[mubking]

"Hey @ogazboiz , the CI failures are coming from code merged into my branch from main (sandbox.ts, user.controller.ts, prisma-sandbox.ts, contracts/test.rs, etc.)—these errors exist in main independently of my changes. My commits only touch the CI workflow and the stream details screen. Happy to rebase once those upstream issues are resolved, or let me know how you'd like to proceed!

[mubking]

Hey @ogazboiz, please look into that

[ogazboiz]

hey, thanks for the contribution!

To ensure your Pull Request passes the CI pipeline and maintains repository stability, please follow these technical requirements:

1. Backend Testing (Vitest)

• Version: We have standardized on Vitest ^2.1.8. Do not upgrade to v3 or v4 without explicit approval, as they introduce native dependency issues in the CI environment.
• Isolation: Each test file now runs in its own forked process (pool: 'forks'). This prevents vi.mock() and other module-level states from leaking between files.
• Prisma Mocking: When testing controllers, always mock the Prisma client in backend/src/lib/prisma.ts. Do not rely on a real database for unit tests.
• CLI Flags: Avoid using the --verbose flag in Vitest commands, as it is incompatible with the v2 CLI.

2. API Versioning & Routing

• Endpoints: Hit versioned endpoints (e.g., /v1/streams) instead of the deprecated root endpoints (e.g., /streams).
• Response Codes: Endpoints return 410 Gone for specifically deprecated routes. Ensure your tests handle these correctly.
• Input Validation: Controllers expect strict field names (e.g., streamId, ratePerSecond, depositedAmount). Use the types defined in src/services/ and src/controllers/.

3. Infrastructure & Dependencies

• Husky: The pipeline skips Husky. Your package.json scripts should use husky || true to prevent non-interactive shell failures.
• Prisma Generation: Always ensure your workflow runs prisma generate before tests. The CI now handles this in a consolidated "Setup Database" step.
• Native Bindings: If you add dependencies with native bindings (like Rollup or ESBuild), ensure they are compatible with the ubuntu-latest (linux-x64) runner.

4. Frontend Best Practices

• Directives: Always include "use client" at the top of components that utilize React hooks or browser APIs.
• Dependencies: Ensure all utilized libraries (like react-hot-toast) are explicitly added to frontend/package.json and not just inherited from the root.

Please make sure your CI passes before we finalize the merge. Let us know if you have any questions!

If you want to follow up or have questions, join us on Telegram: https://t.me/+DOylgFv1jyJlNzM0

[ogazboiz]

hey, just checking in on this again — still waiting on those updates to fix the CI based on our last comment. no rush if you're busy, just let us know if you plan to continue with it or if we should close it for now!

if you want to contribute more or follow up if issues are open, join us on Telegram: https://t.me/+DOylgFv1jyJlNzM0

[mubking]

Hey @ogazboiz , all CI checks are now passing

Here's what was fixed:

• Resolved merge conflicts with main (layout.tsx, package.json, tsconfig.json)
• Aligned React to v19 and added missing react-hot-toast dependency
• Fixed eslint config to match upstream
• Fixed LiveCounter.tsx filename casing

Ready for review and merge!

[mubking]

@ogazboiz , Hello

[mubking]

helllo @ogazboiz, please verify the changes

[ogazboiz]

solid work sticking with this one @mubking — really appreciate the persistence in rebasing and getting CI green!

the dynamic route approach with [id]/page.tsx is correct for Next.js, LiveCounter and ProgressBar are clean reusable components, and the progress/transaction history layout looks good. CI is all passing and there are no conflicts.

one thing to pick up in a follow-up: the mock recipient addresses are still using Ethereum format (0xAbC…1234) — swap those for Stellar-style public keys when you get a chance. not a blocker for this PR though.

merging this in — great job! and come join us on Telegram: https://t.me/+DOylgFv1jyJlNzM0