Implement Wallet Connection System

## 📚 Overview

Develop a unified wallet connection system that supports Stellar-compatible wallets like **Freighter** and **Albedo**. This system will serve as the foundation for secure and seamless Web3 interactions across the SkillChain platform.

If you have doubts about how to start, feel free to check out the [[README file](https://github.com/byteworkscr/dApp-TrustBridge/blob/develop/README.md)](https://github.com/byteworkscr/dApp-TrustBridge/blob/develop/README.md) for guidance.

---

## 🔍 Background

Currently, SkillChain lacks a standardized way for users to connect their Stellar wallets, which limits their ability to interact with the platform’s on-chain features. A dedicated wallet context will centralize this logic, manage connection state, and ensure a smooth user experience.

---

## 💠 Requirements

- Create a `WalletContext` using React Context API to manage connection state
- Implement connect/disconnect flows for Freighter and Albedo
- Handle network switching between testnet and mainnet
- Display connected account public key and balance
- Build UI in `components/auth/WalletSelector.tsx`
- Add wallet status indicator to the Navbar
- Write integration tests using `@testing-library/react`

---

## 🔧 Implementation Plan

### 1. Create Feature Branch

```bash
git checkout -b feature-wallet-connection-[issue-number]
```

### 2. Wallet Integration Logic

- Install Stellar SDK
- Detect installed wallets (Freighter, Albedo)
- Handle connection requests and persist wallet state
- Fetch public key and balance once connected

### 3. UI Components

- Create `WalletSelector` dropdown with available wallet options
- Show wallet address and balance on selection
- Add persistent status icon in Navbar (green = connected, red = disconnected)

### 4. Network Support

- Allow user to switch between Testnet and Mainnet
- Show current network name in the wallet selector UI

### 5. Styling

- Use **SHADCN/UI** and **Tailwind CSS**
- Follow Figma design (link to be added)
- Ensure full responsiveness and dark/light mode support

### 6. Testing

- Integration tests for connection, disconnection, and UI render
- Mock Stellar wallet objects for unit testing
- Cover edge cases: denied connection, unsupported browser, wallet not found

### 7. Commit and Push

```bash
git add .
git commit -m "Feature: Add unified Stellar wallet connection system"
git push origin feature-wallet-connection-[issue-number]
```

---

## ✅ Definition of Done

- [ ] 100% test coverage for connection flows
- [ ] Responsive UI
- [ ] Follow Figma designs
- [ ] Passes pull request template standards
- [ ] Developer attaches a screenshot of the component (insert below)

---

## ⚙️ Technical Considerations

- Use `stellar-sdk` for network calls and balance fetching
- Store selected wallet provider in localStorage or Zustand
- Ensure compatibility with browser extensions like Freighter

---

## Note

Feel free to ask in the [[Telegram group](https://t.me/+YZEXOc_LOzIyYTgx)](https://t.me/+YZEXOc_LOzIyYTgx) if you need help getting started with Stellar wallets or integration.

**Insert Mockup Here:**



### Timeframe
2 days

Start with the README, then inspect components/auth/WalletSelector.tsx and the existing Navbar entry point. Trace how the frontend currently manages state and tests before planning the Freighter and Albedo integrations. Done means connection, disconnection, network selection, account and balance display, Navbar status, responsive styling, and integration tests covering the listed edge cases.

Written by the indexing model from the issue text.