Integrate `@stellar/freighter-api`

[meshackyaro]

Description

This issue aims to address the implementation of Integrate @stellar/freighter-api.

The core objective is to: Add a Connect Wallet button in the navbar that handles network switching and connection.

By completing this feature, we will ensure that the TrustFlow protocol maintains its high standards for security, usability, and decentralized logic. This issue requires careful attention to the Frontend architecture and adherence to the existing project conventions.

When picking up this issue, please ensure you document any new dependencies or architectural decisions made during development.

Component

Frontend

Difficulty

🔴 Hard

Tasks

• Review Next.js App Router structure
• Implement the UI components for: Integrate @stellar/freighter-api
• Ensure responsive design using Tailwind CSS or standard modules
• Add caching for npm dependencies in CI
• Run npm run lint and npm run typecheck
• Run npm run build to verify production bundling

Acceptance Criteria

• Feature accurately implements the objective: Add a Connect Wallet button in the navbar that handles network switching and connection.
• Any PR that introduces TypeScript/Rust errors is automatically blocked
• CI pipeline runs in under 3 minutes per PR
• Code is properly reviewed and approved by codeowners

Estimated Time

1-3 days

[meshackyaro]

Integration Points

The UI is ready for wallet integration! Here's where Freighter needs to be connected:

Navbar (components/organisms/navbar/index.tsx)

• Replace the "Launch App" button with ConnectButton
• Show connected wallet address when connected
• Add disconnect option

Dashboard (pages/dashboard.tsx and sub-pages)

• Update "Connected Wallet" section in sidebar to show real address
• Fetch and display user's active gigs
• Load escrow balances

Hooks to enhance:

• hooks/useAccount.ts - Already has skeleton, needs full Freighter integration
• components/atoms/connect-button/index.tsx - Needs proper connection flow

Testing:
Run npm run dev and test wallet connection flow on testnet.

Let me know if you need any clarification!