Fix wrong icon used for Notification tab in Settings and hardcoded data in InfoAvatar

[portableDD]

📋 Description

Two related UI correctness issues exist in the settings area:

Bug 1 — Wrong icon on Notification tab:
In components/settings/tabs.tsx, the Notification tab uses SecurityIcon instead of a notification/bell-related icon:

<TabsTrigger value="notification">
  <SecurityIcon   // ← wrong, this is the same icon as the Security tab
    color={isActiveTap === "notification" ? "#000" : ""}
    className="size-3.5"
  />
  Notification
</TabsTrigger>

Both the Security tab and the Notification tab currently display the same icon, making them visually indistinguishable. The Bell icon from lucide-react is the correct icon for the Notification tab.

Bug 2 — Hardcoded username and wallet address in InfoAvatar:
components/settings/info-avatar.tsx displays the hardcoded username "cerseiload" and the hardcoded wallet address "0xAbc...123". These are placeholder values that were never replaced with real data from the authenticated user's profile.

🔍 Context

SecurityIcon is a custom SVG component from components/icons. The Bell icon is already available in lucide-react which is installed as a project dependency. No new packages are needed.

For InfoAvatar, the authenticated user's data is available from useAuthStore (the user object). The wallet address should come from the same API source being used in AccountOverview — either from the user profile or a wallet endpoint. For now, reading the username from useAuthStore is the minimum requirement; the wallet address can show a truncated placeholder with a TODO comment if the wallet API is not yet wired in this component.

📁 Key Files

• components/settings/tabs.tsx — Notification tab uses SecurityIcon instead of Bell
• components/settings/info-avatar.tsx — hardcoded "cerseiload" username and "0xAbc...123" wallet address
• hooks/use-auth-store.ts — source of the authenticated user object (username/email)
• components/icons/index.tsx — reference for how custom icons are structured

✅ Acceptance Criteria

• The Notification tab in Settings displays a Bell icon (or semantically equivalent notification icon from Lucide)
• The Security tab and Notification tab now have visually distinct icons
• InfoAvatar reads and displays the authenticated user's real username (or email if username is unavailable)
• The copy wallet address button in InfoAvatar either shows a real truncated address or a clear "Not connected" placeholder — not the hardcoded "0xAbc...123"
• No TypeScript errors introduced
• Tested on both desktop and mobile viewports

🛠️ Suggested Execution

1. Setup

git checkout -b <your-branch-name>

2. Implement changes

Notification tab icon:

• In components/settings/tabs.tsx, add import { Bell } from "lucide-react"
• Replace <SecurityIcon ... /> inside the value="notification" TabsTrigger with <Bell className="size-3.5" />

InfoAvatar real data:

• Add "use client" directive to components/settings/info-avatar.tsx if not already present
• Import useAuthStore and read user from the store
• Replace "cerseiload" with user?.username ?? user?.email ?? "..."
• Replace "0xAbc...123" with either the real wallet address from the store/API, or a "Not connected" label until the wallet API is integrated
• If showing wallet address, wrap the copy button onClick with navigator.clipboard.writeText(realAddress)

3. Validate

• Open Settings — the Notification tab should show a bell icon, clearly different from the Security tab's icon
• Log in and open Settings — your real username should appear in the avatar card
• The wallet address should not say "0xAbc...123"

4. Commit & PR

git commit -m "fix: use Bell icon for notification tab and replace hardcoded user data in InfoAvatar"

📌 Guidelines

• PR description must include: Closes #[issue_number]
• PR must include a screenshot of the Settings tabs showing distinct icons and real user data
• Follow existing code style — TypeScript strict, Tailwind for styling
• Do not introduce new dependencies — use lucide-react which is already installed

🏆 Reward

This issue is worth 200 points in the Drips Wave program.